I was struggling with setting up libsass as it wasn't as straight-forward as the Ruby based transpiler. Could someone explain how to:
- install libsass?
- use it from command line?
- use it with task runners like gulp and grunt?
I have little experience with package managers and even less so with task runners.
In Windows 10 using node v6.11.2 and npm v3.10.10, in order to execute directly in any folder:
I only followed the instructions in node-sass Github:
Add node-gyp prerequisites by running as Admin in a Powershell (it takes a while):
In a normal command-line shell (Win+R+cmd+Enter) run:
The
-g
places these packages under%userprofile%\AppData\Roaming\npm\node_modules
. You may check thatnpm\node_modules\node-sass\bin\node-sass
now exists.Check if your local account (not the System)
PATH
environment variable contains: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:
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 theGYP_MSVS_VERSION
environment variable with2015
as a value.> uglifyjs main.js main.min.js
and> mocha
I picked node-sass implementer for libsass because it is based on node.js.
Installing node-sass
$ 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:
Examples:
$ node-sass my-styles.scss my-styles.css
compiles a single file manually.$ node-sass my-sass-folder/ -o my-css-folder/
compiles all the files in a folder manually.$ 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.
package.json
file in your project directory running$ npm init
will create one. Use it with-y
to skip the questions."sass": "node-sass -w sass/ -o css/"
toscripts
inpackage.json
file. It should look something like this:$ npm run sass
will compile your files.How to use with gulp
$ npm install -g gulp
installs Gulp globally.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
addsgulp
todevDependencies
inpackage.json
.$ npm install gulp-sass --save-dev
installs gulp-sass locally.gulpfile.js
file in your project root folder with this content:A basic example to transpile
Add this code to your gulpfile.js:
$ gulp sass
runs the above task which compiles .scss file(s) in thesass
folder and generates .css file(s) in thecss
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
:All is set now! Just run the watch task:
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:
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