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:

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.

User · Answer

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

User · Answer

In Windows 10 using node v6 11 2 and npm v3 10 10  in order to execute directly in any folder    gt  node-sass  options   lt input scss gt   output css    I only followed the instructions in node-sass Github    Add node-gyp prerequisites by running as Admin in a Powershell  it takes a while     gt  npm install --global --production windows-build-tools  In a normal command-line shell  Win R cmd Enter  run    gt  npm install -g node-gyp  gt  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  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  gt  node-gyp or  gt  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  gt  uglifyjs main js main min js and  gt  mocha

User · Answer

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   lt input scss gt   output css    cat  lt input scss gt    node-sass  gt  output css   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    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

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

The answer is

Examples related to css

Examples related to sass

Examples related to gulp-sass

Examples related to node-sass

Examples related to libsass

Tags