I have a master.scss with many imports from other .scss files. If I change a * .scss file master.css is generated automatically.
I use only the NPM, no Gulp or Grunt! This should remain so.
My current build script:
"scripts": {
"watch-sass": "sass --watch src/scss/master.scss:dist/css/master.css"
}
That's nice but takes a long time to compile!
Now I'm trying to use node-sass. It should compile very fast.
Unfortunately, I do not understand it completely ...
node-sass is installed, via npm install node-sass
Where do I use the following (from docs)?
var sass = require('node-sass');
sass.render({
file: scss_filename,
[, options..]
}, function(err, result) { /*...*/ });
// OR
var result = sass.renderSync({
data: scss_content
[, options..]
});
This is not so in the package.json
, right?
Here's a tutorial, what I've read: Using NPM as a Task Runner
The script is good. How can I use it?
"scripts": {
"sass": "node-sass sass/ -o build/css/"
}
This will compile all of the sass files (that don't start with an underscore) to the build/css/ directory.
I hope for your help!
Once Sass is installed, you can compile your Sass to CSS using the sass command. You'll need to tell Sass which file to build from, and where to output CSS to. For example, running sass input.scss output.css from your terminal would take a single Sass file, input.scss , and compile that file to output.css .
Maybe this covers your question: How to compile or convert sass / scss to css with node-sass (no Ruby)?
If it's an option for you I would recommend using grunt, it will make things a lot simpler and faster. This grunt plugin is probably the best option: https://www.npmjs.com/package/grunt-contrib-sass
// UPDATE
I followed the tutorial you sent and it's very straightforward. You create a file in your root folder called "package.json" containing the following:
{
"watches": {
"sass": "sass/**"
},
"scripts": {
"sass": "node-sass sass/ -o build/css/",
"dev": "rerun-script"
}
}
You then open the command line in the root folder and run the following:
npm install --save-dev node-sass
The above installs node-sass
You then run:
npm install --save-dev rerun-script
The above creates a watch task so you don't have to rerun node-sass everytime you make changes
And last you run
npm run dev
Done!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With