How to compile or convert sass / scss to css with node-sass (no Ruby)?

Question

I was struggling with setting up libsass as it wasn't as straight-forward as the Ruby based transpiler. Could someone explain how to:

1. install libsass?
2. use it from command line?
3. use it with task runners like gulp and grunt?

I have little experience with package managers and even less so with task runners.

Weese

Answer 1

I picked node-sass implementer for libsass because it is based on node.js.

Installing node-sass

• (Prerequisite) If you don't have npm, install Node.js first.
• $ npm install -g node-sass installs node-sass globally -g.

This will hopefully install all you need, if not read libsass at the bottom.

How to use node-sass from Command line and npm scripts

General format:

$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css

Examples:

1. $ node-sass my-styles.scss my-styles.css compiles a single file manually.
2. $ node-sass my-sass-folder/ -o my-css-folder/ compiles all the files in a folder manually.
3. $ node-sass -w sass/ -o css/ compiles all the files in a folder automatically whenever the source file(s) are modified. -w adds a watch for changes to the file(s).

More usefull options like 'compression' @ here. Command line is good for a quick solution, however, you can use task runners like Grunt.js or Gulp.js to automate the build process.

You can also add the above examples to npm scripts. To properly use npm scripts as an alternative to gulp read this comprehensive article @ css-tricks.com especially read about grouping tasks.

• If there is no package.json file in your project directory running $ npm init will create one. Use it with -y to skip the questions.
• Add "sass": "node-sass -w sass/ -o css/" to scripts in package.json file. It should look something like this:

"scripts": {
    "test" : "bla bla bla",
    "sass": "node-sass -w sass/ -o css/"
 }

• $ npm run sass will compile your files.

How to use with gulp

• $ npm install -g gulp installs Gulp globally.
• If there is no package.json file in your project directory running $ npm init will create one. Use it with -y to skip the questions.
• $ npm install --save-dev gulp installs Gulp locally. --save-dev adds gulp to devDependencies in package.json.
• $ npm install gulp-sass --save-dev installs gulp-sass locally.
• Setup gulp for your project by creating a gulpfile.js file in your project root folder with this content:

'use strict';
var gulp = require('gulp');

A basic example to transpile

Add this code to your gulpfile.js:

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

$ gulp sass runs the above task which compiles .scss file(s) in the sass folder and generates .css file(s) in the css folder.

To make life easier, let's add a watch so we don't have to compile it manually. Add this code to your gulpfile.js:

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

All is set now! Just run the watch task:

$ gulp sass:watch

How to use with Node.js

As the name of node-sass implies, you can write your own node.js scripts for transpiling. If you are curious, check out node-sass project page.

What about libsass?

Libsass is a library that needs to be built by an implementer such as sassC or in our case node-sass. Node-sass contains a built version of libsass which it uses by default. If the build file doesn't work on your machine, it tries to build libsass for your machine. This process requires Python 2.7.x (3.x doesn't work as of today). In addition:

LibSass requires GCC 4.6+ or Clang/LLVM. If your OS is older, this version may not compile. On Windows, you need MinGW with GCC 4.6+ or VS 2013 Update 4+. It is also possible to build LibSass with Clang/LLVM on Windows.

Weese

npm install --save-dev node-sass compile scss files too ? – Montherlant

@PardeepJain yes it does :) – Weese

You can add "sass": "node-sass -w sass/ -o css/" to your scripts. There is more to it than just this, I will write a new Q&A about it if I ever had time. – Weese

@Thoran: I did but on npm start the scss is not getting compiled to css as it should be. Here is the code: "start": "concurrently \"npm run tsc:w\" \"npm run lite\" \"npm run sass\" ", "sass": "node-sass -w app/sass/ -o app/css/", – Illconsidered

@Weese is it possible to run another script after node-sass builds source files from watching? Like what if one wanted to run postcss + autoprefixer after building – Cassirer

You can do is with npm scripts. Follow the given link. You can also do it with gulp; I recommend gulp for large projects. – Weese

Why did you install gulp both globally and locally? Is it so you could use gulp on the command line but also have it included as a dependency in your project. If that is the case then would you also want to do that with node-sass as well instead of just installing it globally? – Quarters

@Quarters Perhaps that was the reason, I don't remember. node-sass is in gulp-sass's dependencies, so no need to install it locally. – Weese

@Quarters global install of gulp is necessary if you want to run gulp tasks from command line. – Weese

@Weese Ah that makes sense then if node-sass is a dependency of gulp-sass so it's not needed locally while gulp itself is needed in both places so it can be run on the command line and be included as a dependency in the project. Thanks again, awesome write-up! – Quarters

How would I call sass.render() when I want to compile all .scss files in that directory and write a .css file for every output? I don't want to invoke command line like node-sass -w sass/ -o css/ but call the render method myself. – Francinafrancine

@BernhardDöbler I never used it that way. Which task runner are you using? – Weese

@Weese I was trying to find out if I can avoid using a task runner like gulp or grunt and write a simple npm script that does what I need. I looked into node-sass, the command line obviously uses glob and loops over the files. I guess it's best to simply copy that code. – Francinafrancine

So in order to avoid using Ruby, one can use node.js, a specific version of Python AND a C++ library one needs to compile if usin Windows? That simplifies things a lot. – Neurasthenic

@Neurasthenic I think for most people npm install -g node-sass works including those using windows. – Weese

After getting 'An output directory must be specified when compiling a directory' errors when giving the command prompt I noticed I had to manually create the example.css in the given folder or use the my-css-folder/ output line to automatically create main.css in the given folder. Your answer gave me hint to my problem. Thanks a lot. – Gunpaper

Good summary. Very comprehensible, I don't even know what they wrote on their npm page. – Anallese

Answer 2

npx node-sass input.scss out.css

Dis

Answer 3

The installation of these tools may vary on different OS.

Under Windows, node-sass currently supports VS2015 by default, if you only have VS2013 in your box and meet any error while running the command, you can define the version of VS by adding: --msvs_version=2013. This is noted on the node-sass npm page.

So, the safe command line that works on Windows with VS2013 is: npm install --msvs_version=2013 gulp node-sass gulp-sass

Munson

Answer 4

In Windows 10 using node v6.11.2 and npm v3.10.10, in order to execute directly in any folder:

> node-sass [options] <input.scss> [output.css]

I only followed the instructions in node-sass Github:

1. Add node-gyp prerequisites by running as Admin in a Powershell (it takes a while):

   > npm install --global --production windows-build-tools
   

2. In a normal command-line shell (Win+R+cmd+Enter) run:

   > npm install -g node-gyp
   > npm install -g node-sass
   

   The -g places these packages under %userprofile%\AppData\Roaming\npm\node_modules. You may check that npm\node_modules\node-sass\bin\node-sass now exists.

3. Check if your local account (not the System) PATH environment variable contains:

   %userprofile%\AppData\Roaming\npm
   

   If this path is not present, npm and node may still run, but the modules bin files will not!

Close the previous shell and reopen a new one and run either > node-gyp or > node-sass.

Note:

• The windows-build-tools may not be necessary (if no compiling is done? I'd like to read if someone made it without installing these tools), but it did add to the admin account the GYP_MSVS_VERSION environment variable with 2015 as a value.
• I am also able to run directly other modules with bin files, such as > uglifyjs main.js main.min.js and > mocha

Joses