How to compile scss to css with node-sass


Tags: css,node.js,sass,npm,node-sass

Problem :

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 can I transpile/compile sass or scss with node-sass and gulp-sass (based on libsass not 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!


    CSS Howto..

    How to reflect updates to CSS at runtime in Visual Studio 2012?

    How do I get a div that appears on hover to overlap all others, without using absolute positioning?

    How to get an image's height and set its parent height to auto?

    How to change CSS of last tab in Bootstrap Tab

    How to add a repeating png image in the background of a webpage using CSS?

    How to add TITLE and ALT to an background image (CSS Sprites)?

    How can i scroll to specific ID using Header?

    How to stretch an input button to available width and center it's text using CSS padding and text-indent?

    WordPress TwentyTen menu: how to CSS-select sub-menus in a specific position?

    How to create a full screen div on landing page

    How can i add a line-break on a costume tooltip?

    How to use css selector with class prefix by dojo?

    How can CSS translate elements away from one point?

    Newbie CSS/HTML: How to add ad in a div container to the side of the page?

    How to disable button using jquery in materialize css

    How to center a child element in CSS, even if it is larger than the parent?

    How to overlap auto-scaling images with an auto-scaling background

    Li tag is not aligning correctly in Chrome. How to fix it?

    How to replace css class value using angularjs values?

    How do I get text to wrap to not break out of the box using CSS?

    How to override CSS style assigned to element

    How to make semi-transparent background [duplicate]

    When I print my webpage I lose all the css colouring. Is there an option or script to print a webpage exactly how it looks?

    How to vertically align the text into a coloured div using CSS?

    How to show only the div with id while hiding other divs using CSS only

    How do you set the scroll bar skin on a single List instance?

    How to reference this line in CSS, HTML

    How do I prevent child affected for transform scale in css3?

    How can I wrap this text so it doesn't overflow past the widget container?

    How can I place html text on top of a canvas flot chart?