I have a main.scss file with numerous imports from other .scss files. Whenever I make changes to any of the *.scss files, the master.css file is automatically generated.
I rely solely on NPM for my build process and do not use Gulp or Grunt! It's important for me to keep it that way.
My current build script looks like this:
"scripts": {
"watch-sass": "sass --watch src/scss/master.scss:dist/css/master.css"
}
While this works fine, the compilation process takes a significant amount of time!
Now, I'm exploring the option of using node-sass as it promises faster compilation speed. However, I'm having trouble grasping its usage completely...
node-sass has been installed via npm install node-sass
Where should I integrate the following code (from the documentation)?
var sass = require('node-sass');
sass.render({
file: scss_filename,
[, options..]
}, function(err, result) { /*...*/ });
// OR
var result = sass.renderSync({
data: scss_content
[, options..]
});
This doesn't seem to be added directly to the package.json, right?
Here's a helpful tutorial I've come across: Using NPM as a Task Runner
The suggested script seems useful. How can I implement it?
"scripts": {
"sass": "node-sass sass/ -o build/css/"
}
This command will compile all Sass files (excluding those starting with an underscore) into the build/css/ directory.
Your assistance in this matter would be greatly appreciated!