Search code examples
cssnode.jssassnpmnode-sass

How to compile scss to css with node-sass


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!


Solution

  • 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!