Questions tagged [node-sass]

Node-sass is a library that provides binding for Node.js to libsass, the C version of the popular stylesheet preprocessor, Sass.

Node-sass is a library that provides binding for Node.js to libsass, the C version of the popular stylesheet preprocessor, Sass.

It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.

Find it on npm: https://npmjs.org/package/node-sass

Install

npm install node-sass

Usage

var sass = require('node-sass');
sass.render({
    file: scss_filename,
    success: callback
    [, options..]
    });
// OR
var css = sass.renderSync({
    data: scss_content
    [, options..]
});

Options

The API for using node-sass has changed, so that now there is only one variable - an options hash. Some of these options are optional, and in some circumstances some are mandatory. file

file is a String of the path to an scss file for libsass to render. One of this or data options are required, for both render and renderSync. data

data is a String containing the scss to be rendered by libsass. One of this or file options are required, for both render and renderSync. It is recommended that you use the includePaths option in conjunction with this, as otherwise libsass may have trouble finding files imported via the @import directive.

success

success is a Function to be called upon successful rendering of the scss to css. This option is required but only for the render function. If provided to renderSync it will be ignored.

error

error is a Function to be called upon occurrence of an error when rendering the scss to css. This option is optional, and only applies to the render function. If provided to renderSync it will be ignored.

includePaths

includePaths is an Array of path Strings to look for any @imported files. It is recommended that you use this option if you are using the data option and have any @import directives, as otherwise libsass may not find your depended-on files.

imagePath

imagePath is a String that represents the public image path. When using the image-url() function in a stylesheet, this path will be prepended to the path you supply. eg. Given an imagePath of /path/to/images, background-image: image-url('image.png') will compile to background-image: url("/path/to/images/image.png")

outputStyle

outputStyle is a String to determine how the final CSS should be rendered. Its value should be one of 'nested', 'expanded', 'compact', 'compressed'. [Important: currently the argument outputStyle has some problem which may cause the output css becomes nothing because of the libsass, so you should not use it now!]

sourceComments

sourceComments is a String to determine what debug information is included in the output file. Its value should be one of 'none', 'normal', 'map'. The default is 'none'. The map option will create the source map file in your CSS destination. [Important: souceComments is only supported when using the file option, and does nothing when using data flag.]

sourceMap

If your sourceComments option is set to map, sourceMap allows setting a new path context for the referenced Sass files. The source map describes a path from your CSS file location, into the the folder where the Sass files are located. In most occasions this will work out-of-the-box but, in some cases, you may need to set a different output.

More information: https://github.com/andrew/node-sass

934 questions
44
votes
2 answers

Is node-sass a dev or a production dependency on React projects?

In variaous React documentation I see it being added as a prod dependency but I'm not understanding why. Shouldn't it be a devDependecy since SASS only gets compiled during development and when pushed to prod you are actually pushing the compiled…
user967451
41
votes
6 answers

npm run cannot find module 'sass' after repeated reinstall attempts

Any call to npm run produces this error: $ npm run dev > @ dev /project > npm run development > @ development /project > cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules…
eComEvo
  • 11,669
  • 26
  • 89
  • 145
40
votes
4 answers

How to fix NPM package Tar, with high vulnerability about Arbitrary File Overwrite, when package is up to date?

I just installed Flickity from NPM and got an NPM Audit Security Report after running npm audit stating that I have a high vulnerability issue regarding Arbitrary File Overwrite on package tar which is a dependency of node-sass as you can see…
Wilbert Caba
  • 530
  • 1
  • 6
  • 13
39
votes
12 answers

npm install: Failed at the node-sass@3.13.1 postinstall script

I have a angular application: https://github.com/XBITSwitzerland/ngx-admin/tree/ng2-admin And now I try to do: npm install But I get this error (The compete Output of the command was way too long, so I just share here the last part): gyp ERR! build…
BlockchainProgrammer
  • 1,999
  • 5
  • 20
  • 32
32
votes
10 answers

Error with node-sass when running npm install

I'm getting the following errors whenever I run npm install on a vue.js project 5769 error code 1 5770 error path /*my path*/node_modules/node-sass 5771 error command failed 5772 error command sh -c node scripts/install.js 5773 error /*my…
Scott Dunn
  • 321
  • 1
  • 3
  • 5
31
votes
16 answers

yarn install failing import sys; print "%s.%s.%s" % sys.version_info[:3] invalid syntax

When doing yarn install i get this error, but no issues one other projects, also used Brew to install node. Note sure what else should i try, any suggestions? error */node_modules/node-sass: Command failed. Exit code: 1 Command: node…
Marius
  • 1,664
  • 2
  • 16
  • 28
31
votes
2 answers

Switching from node-sass to dart sass in my angular-cli project

I've been having issues with node-sass doing all manner of silliness during "npm install" including but not limited to : GNU c++ compiling something (likely itself) trying to run python2.7 trying to run any other version of python trying to…
tatsu
  • 2,316
  • 7
  • 43
  • 87
29
votes
7 answers

Using node-sass watch option with npm run-script

So I'm running tasks in npm package scripts but I want to pass the watch option in npm start. This works: "scripts": { "scss": "node-sass src/style.scss dist/style.css -w" } This doesn't compile, watch, or throw any error: "scripts": { "scss":…
Ryan Metin
  • 899
  • 2
  • 8
  • 22
28
votes
5 answers

How to use SCSS variables into my React components

I am working on a React project that follows this structure src | components | Footer | index.jsx styles.scss Header | index.jsx styles.scss scss | helpers.scss variables.scss ... …
abaracedo
  • 1,404
  • 5
  • 26
  • 45
28
votes
3 answers

Injecting variables during SASS compilation with Node

In an application I'm working, I have to dynamically compile SASS before rendering on the client (caching system is coming, don't worry). Currently I'm using node-sass and everything is working great. Here is what I'm working on so far. Other…
Chris Wright
  • 754
  • 1
  • 8
  • 19
28
votes
2 answers

Get SASS to autocompile with NodeJS Express and node-sass

I'm developing using node.js, and instead of writing css would like to write SCSS files that auto-compile whenever I refresh the page. How can I get SASS files to autocompile when using NodeJS, Express and node-sass.
Izhaki
  • 23,372
  • 9
  • 69
  • 107
26
votes
3 answers

npm with node-sass and autoprefixer

I use node-sass to compile all my Sass files to a master.css. This works well but now I want to add prefixes. I would like to use only the npm, no Gulp or Grunt. Here my package.json file: { "name": "xxxxxx.com", "version": "1.0.0", …
QJan84
  • 786
  • 3
  • 9
  • 22
25
votes
12 answers

Issue using node-sass after updating NodeJS

I get an issue using node-sass after updating my NodeJS version. Issue : (node:472) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent…
tonymx227
  • 5,293
  • 16
  • 48
  • 91
24
votes
6 answers

Node Error: resolve-url-loader: CSS error

I am trying to run a react project as dev server on my surface, and if gives me the error shown below and in the title. When I am running the same config on my pc I am not having this problem. (I tried creating the same conditions, but it just wont…
Maxdola
  • 1,562
  • 2
  • 10
  • 29
23
votes
3 answers

The implementation option must be passed to the Sass task

Running grunt - I get this error message: Running "sass:all" (sass) task Fatal error: The implementation option must be passed to the Sass task I've tried re-installing grunt, node, npm, dependencies - but I always come back to this error I can't…
DrewM
  • 353
  • 1
  • 3
  • 9
1
2
3
62 63