3

I setup a grunt tast to compile all sass and scss files into css using grunt-contrib-sass. The issue I am facing is because it's a modular architecture, I don't have a single sass and css folder. Instead I have a sass and css folder for each module.

When I specify the module name it works and compiles the sass file into css, but only for that module, like so:

sass: {
            dev: {
                expand: true,
                cwd: 'public/modules/someModuleName/sass',
                src: ['*.{scss,sass}'],
                dest: 'public/modules/someModuleName/css',
                ext: ['.css']
            }
        }

Instead I need it to compile the sass files into css for each module dynamically, like so:

sass: {
            dev: {
                expand: true,
                cwd: 'public/modules/**/sass',
                src: ['*.{scss,sass}'],
                dest: 'public/modules/**/css',
                ext: ['.css']
            }
        }

Here is the folder structure:

|-public
|--modules
|---SomeModuleName1
|----Sass
|-----*.scss
|----CSS
|-----*.css
|---SomeModuleName2
|----Sass
|-----*.scss
|----CSS
|-----*.css
Elmar Gasimov
  • 115
  • 1
  • 8

1 Answers1

4

From the looks of the directory structure and based on the mean.io tag, I'm assuming you are using meanjs.org or mean.io.

What I did and recommend is that if you are going with sass, you go all in sass.

  1. Rename your each css folder under public/modules/*/ to scss
  2. Convert the existing *.css files to *.scss files
  3. Create a new [style/scss/stylesheets] folder in the public directory
  4. Create a new file(style.scss or main.scss) as the main style file. Recommend main.scss as a convention.
  5. In your main.scss you import the module scss files:

@import "../modules/core/style/core"; @import "../modules/users/style/users";

This step is kind of annoying and I'm sure it can be automated somehow. (2 options below)

  1. https://www.npmjs.com/package/grunt-sass-directory-import
  2. https://github.com/chriseppstein/sass-globbing

For your sass task:

sass: {
    options: {
        sourcemap: 'none',
        update: true
    },
    dev: {
        options: {
            lineNumbers: true
        },
        files: {
            'public/dist/application.css': 'public/style/main.scss'
        }
    },
    dist: {
        options: {
            style: 'compressed'
        },
        files: {
            'public/dist/application.min.css': 'public/style/main.scss'
        }
    } },

Cleanup work to your gruntfile:

  1. You would need to add clientSCSS to your watchFiles if you want and run the sass:dev task.
  2. csslint task is not needed and should be replaced with scsslint.
  3. cssmin task is not needed as the sass:dist has the compressed option.

Cleanup work in all.js and production.js:

  1. Remove references to *.css files in the assets:lib:css and assets:css with the exception of public/dist/application.css and public/dist/application.min.css
  2. Use the corresponding sass version of bootstrap if you want instead and follow the @include approach in main.scss
xiaogwu
  • 81
  • 6