Be the first user to complete this post
|
Add to List |
Configuring sass with your nodejs applications
Package Installations
You only need one package for setting up SASS.
npm install grunt-contrib-sass --save-dev
.sass-cache
to your .gitignore
file. These are temporary files created by the grunt sass command that you probably wont need to check in if you are using .git.
Grunt Configuration
As mentioned earlier the aim of this setup is to create a npm script as shown below that compiles all the scss files present in public/scss directory of your project into the public/stylesheets directory.
npm run build-css
scripts:{
// other scripts
// ...
"build-css": "grunt sass"
}
"scripts": {
"build": "grunt react && grunt webpack && grunt sass",
"build-js": "grunt react && grunt webpack",
"build-css": "grunt sass",
"dev": "grunt watch & nodemon app"
},
module.exports = function(grunt) {
grunt.initConfig({});
grunt.config( 'sass', require('./grunt/sass.js') );
grunt.loadNpmTasks('grunt-contrib-sass');
};
module.exports = {
dist: {
files: [{
expand: true,
cwd: 'public/scss/',
src: ['*.scss'],
dest: 'public/stylesheets/',
ext: '.css'
}]
}
};
src
is an array of source file matching patterns, the dest
is the path to the desintation directory where the compiled files will be placed. What is not obvious is the fact that the cwd
applies only to the src
property. i.e. all the patterns that you specify in the src
array are relative to the directory specified as the value of cwd
.
Well, thats mainly it. Now if you create an scss file in your public/scss directory and run the command
npm run build-css
grunt scss
task will run and create a public/stylesheets directory(we specified this as the value of the dest
property in our configuration) and put your compiled css files there.
Perhaps at this point, you might also want to add stylesheets to your .gitignore
configuration.
Also Read:
- Applying floats and clearfix to block elements
- Understanding the CSS 3 transition property syntax
- position:absolute
- Using css3 calc in an attribute value to compute its value at runtime
- css: margin does not work