Can't get modular Sass framework working in mid.js grunt
I am setting up grunt tast to compile all sass and scss files to css using grunt-contrib-sass. The problem I am running into is that this is modular architecture, I don't have any sass and css folders. Instead, I have a sass and css folder for each module.
When I give the name of the module, it works and compiles the sass file to css, but only for that module, for example:
sass: {
dev: {
expand: true,
cwd: 'public/modules/someModuleName/sass',
src: ['*.{scss,sass}'],
dest: 'public/modules/someModuleName/css',
ext: ['.css']
}
}
Instead, I need this to compile sass files to css for each module dynamically, for example:
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
source to share
From the looks of the directory structure and based on the mean.io tag, I assume you are using meanjs.org or mean.io.
What I did and recommend is that if you go with sass, you all get into it.
- Rename each css folder under public / modules / * / scss
- Converting existing * .css files to * .scss files
- Create a new folder [style / scss / stylesheets] in the public directory
- Create a new file (style.scss or main.scss) as your main style file. Recommend main.scss as convention.
- In your main.scss, you import the scss files of the module:
@import "../modules/core/style/core";
@import "../modules/users/style/users";
This step is pretty annoying and I'm sure it can be automated in some way. (2 options below)
- https://www.npmjs.com/package/grunt-sass-directory-import
- 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'
}
} },
The cleanup works with your grunt file:
- You will need to add clientSCSS to your watchfiles if you want and run the sass: dev task.
- The csslint task is unnecessary and should be replaced with scsslint.
- The cssmin task is unnecessary as sass: dist is compressed.
Cleanup works in all.js and production.js files:
- Remove references to * .css files in assets: lib: css and assets: css, excluding public / dist / application.css and public / dist / application.min.css
- Use the appropriate sass version of sass if you like and follow the @include subroutine in main.scss
source to share