What's the best way to structure and compile the scss files and the according css files within different modules?
My first thought was to compile every scss file into a css folder within a module but I cannot get this working.
My grunttask for this approach was
sass: {
options: {
style: 'expanded'
},
dev: {
files: [{
expand: true,
cwd: 'public/modules/**/style/',
src: '*.scss',
dest: '../css',
ext: '.css'
}]
}
}
according gruntfile code looks looks like this:
// Default task(s).
grunt.registerTask('default', ['lint','sass:dev', 'concurrent:default']);
my folder structure:
/public
/css
/modules
/core
/css
/scss
core.scss
/another-module
/css
/scss
module.scss
/style
main.scss
Related
We are trying to compile our sass files to css files, however we want to compile each individual sass file into an individual css file (one-to-one).
For example our product_view.scss should have a product_view.css.
However all configurations we have tried create one css file for everything called styles.css in our "out/css" folder.
sass: {
dist: {
options: {
compass: true,
style: 'expanded'
},
files: [{
expand: true,
cwd: '<%= pkg.src %>/assets/sass',
src: ['*.scss'],
dest: '<%= pkg.src %>/assets/media/out/css',
ext: '.css'
}]
},
},
I use grunt-contrib-compass (Compass) to compile my SASS, which has some nice extras. For example, compass includes a reset utility you can use by using
#import 'compass/reset';
But disregarding that, compass also outputs every file individually (as long as it does not start with _ which are files that can be included but won't be compiled by themselves). Here is the setup I use in my gruntfile:
compass: {
'default': {
options: {
sassDir: "css/sass/",
cssDir: "css/",
outputStyle: "compressed"
}
}
}
In my application SCSS files gets compiled to CSS files and all the files included in one main.css file. There are some other CSS files which also gets included in main.css file, how can I using Grunt create one CSS file from all these CSS and SCSS files?
Note: All my CSS file is in client folder and SCSS file after compilation goes to public folder.
MSK
What you are looking for is (file)-concatination.
There is an excellent plugin for grunt: grunt-contrib-concat
Example-Configuration (static):
concat: {
dist: {
//Add your files to src
src: [
'client-folder/file1.css',
'public/compiled.css'
],
dest: 'output/style.css',
},
},
Example-Configuration (dynamic):
concat: {
dist: {
src: [
//Will use all .css files in client-folder/
'client-folder/**.css',
'public/compiled.css'
],
dest: 'output/style.css',
},
},
grunt concat:dist will then concat the content of your src files into the dest file.
You can dig deeper into the documentation for more grunting fun.
I have a branding application where I would like to have this output:
/branding/
/default/
default.css
/brand1/
brand1.css
/brand2/
brand2.css
This one should be output from a branding folder with same structure but with .less files
So I would like to do something like this:
less: {
production: {
options: {
},
files: {
'dist/branding/**/*.css': 'branding/**/*.less'
}
}
}
I just seen examples on this where they all go to same folder, but I want to keep this dynamic because in my case there is like a ton of brandings, and the branding folders have more than just a css file, they also have other artifacts like images and so on.
Any suggestions?
If I understand you correctly you want LESS files under branding compiled to a dist/branding folder and to keep the folder structure.
To do that you would do something like this:
files: [
{
expand: true, // Recursive
cwd: "branding", // The startup directory
src: ["**/*.less"], // Source files
dest: "dist/branding", // Destination
ext: ".css" // File extension
}
]
You can visit http://rajdeepdeb.me/less-to-css-grunt-for-multiple-files/
Add the following configuration in your grunt file
...rest of the grunt configuration,
files: [{
expand: true,
cwd: '/',
src: ['**/*.less'],
dest: '/',
ext: '.css',
extDot: 'last'
}],
... rest of the grunt configuration
The Context
I'm new to Grunt and am trying to learn a bit by modifying the meanjs boilerplate to support stylus, I would like to keep my precompiled css assets organized in modular buckets, as recommended by the current meanjs defaults.
The Question
I have the following file structure:
- app
- config
- public
- modules
- foo
- assets
- stylesheets
...
- css
...
...
How can I use Grunt to take Stylus .styl files in the public/modules/*/assets/stylesheets directory, and have them compile to the public/modules/*/css directory?
Naive Attempt:
Below is an example attempt, which didn't get very far.
stylus: {
compile: {
files: [{
dest: '../../css',
src: 'public/modules/*/assets/stylesheets/*.styl',
ext: '.css',
expand: true
}]
}
}
This results in: File ../../css/public/modules/foo/assets/stylesheets/baz.css created.
If I leave "dest" empty, it does properly compile but the output is in the assets/stylesheets folder (as expected). I'm sure there is a clean way to do this, but I don't know yet.
setting the src, dest, cwd, as well as using the hidden rename options of grunt should get stylus files in your desired format.
example:
stylus: {
compile: {
options: {
compress: true
},
files: [{
cwd: 'public/modules',
dest: 'public/modules',
src: ['*/assets/stylesheets/*.styl'],
expand: true,
rename: function(dest, src) {
var path = require('path');
var module = src.split(path.sep).slice(0,1)[0];
return path.join(dest, module + '/css/' + module + '.css');
}
}]
}
},
grunt tricks - customize file output rename
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
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.
Rename your each css folder under public/modules/*/ to scss
Convert the existing *.css files to *.scss files
Create a new [style/scss/stylesheets] folder in the public directory
Create a new file(style.scss or main.scss) as the main style file. Recommend main.scss as a convention.
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)
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'
}
} },
Cleanup work to your gruntfile:
You would need to add clientSCSS to your watchFiles if you want and
run the sass:dev task.
csslint task is not needed and should be
replaced with scsslint.
cssmin task is not needed as the sass:dist
has the compressed option.
Cleanup work in all.js and production.js:
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
Use the corresponding sass version of bootstrap if you want instead and follow the #include approach in main.scss