How to compile scss to css with node-sass

Question

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!

Community · Accepted Answer · 2017-05-23 11:53:54Z

8

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!

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Jan 20, 2016 at 10:44

Vasilis Tsirimokos

2032 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

QJan84 Over a year ago

I would like to try it first without gulp / grunt. Finally, it goes also without, see Tutorial link. I just do not know how I use "node-sass" properly.

Vasilis Tsirimokos Over a year ago

Before downvoting my answer you could have a look at the first link that I sent. The answer you are looking for is there: stackoverflow.com/a/31448585/4265499

QJan84 Over a year ago

Sorry, misclick ... No, the answer is not there. The aim is to compile the run as a task.

Vasilis Tsirimokos Over a year ago

How about using the command line directly and doing sthing like:$ node-sass src/scss/ -o dist/css/

QJan84 Over a year ago

I do not want to start the command line with each change! That must go automatically!

|

A A · Accepted Answer · 2017-08-18 10:24:13Z

5

Documentation.

If you want automatically compile files then you need to put the flag -w

node-sass -w -r assets/src/scss/ -o assets/dist/css/

My package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "build:js": "watchify assets/src/js/main_1.js -o 'exorcist assets/dist/js/main_1.js.map > assets/dist/js/main_1.js' -d -t [babelify --presets [latest]]",
    "build:scss": "node-sass -w -r assets/src/scss/ -o assets/dist/css/",
    "build": "npm run build:scss & npm run build:js"
  },
  "devDependencies": {
    "babel-cli": "^6.0.0",
    "babel-preset-latest": "^6.16.0",
    "babelify": "^7.3.0",
    "browserify": "^13.1.1",
    "exorcist": "^0.4.0",
    "node-sass": "^4.5.0",
    "watchify": "^3.7.0"
  },
  "browserify": {
    "transform": [
      "babelify"
    ]
  }
}

Actual version of package.json: https://gist.github.com/artamonovdev/5f24aaca504e4d1b299bba0413f0a57d

edited Aug 18, 2017 at 10:24

answered Feb 28, 2017 at 18:34

A A

2,3801 gold badge32 silver badges36 bronze badges

1 Comment

Roralee Over a year ago

Your answer by far is the least "krufty" method of getting custom scss set up and running for a project that has BS4 and brand overrides required. All my other research resulted in front-end dev hostile complex configs.

Adriano · Accepted Answer · 2020-06-03 00:42:15Z

5

The watch mode in node-sass doesn't run the first compilation. It supposes that you have already ran node-sass.

Personally, I use something like this:

{
  "scripts": {
    "sass": "node-sass -o /path/to/dist /path/to/src",
    "sass:watch": "npm run sass && npm run sass -- --watch --recursive"
  }
}

And you can use it like this: npm run sass:watch

edited Jun 3, 2020 at 0:42

Adriano

3,9845 gold badges36 silver badges58 bronze badges

answered Apr 17, 2018 at 12:35

la3roug

3112 silver badges7 bronze badges

2 Comments

SpaceNinja Over a year ago

Then I add this "npm run sass:watch" to my "start" script so this can happen automatically using npm start?

la3roug Over a year ago

@SpaceNinja yes

Collectives™ on Stack Overflow

How to compile scss to css with node-sass

3 Answers 3

7 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related