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

721 questions
474
votes
13 answers

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

I've created a blank React project, using the command: npx create-react-app on npm v7.0.7 and Node v15.0.1 Installed: React v17.0.1, node-sass v5.0.0, Then I tried to import blank .scss file to App component: App.js import './App.scss' function…
JDKot
  • 4,875
  • 2
  • 8
  • 12
248
votes
31 answers

Error: Node Sass does not yet support your current environment: Windows 64-bit with false

E:\A Prem World\Team_Work_Tasks\Anjali\Anjali_20160524\QuizApp_20160524_01_Anj>ionic serve -l (node:4772) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent…
Premkumar Agrawal
  • 2,716
  • 2
  • 10
  • 13
152
votes
22 answers

Node Sass does not yet support your current environment: Linux 64-bit with false

Getting this error on Arch Linux with node-sass. I'm using it with gulp-sass. Node Sass does not yet support your current environment: Linux 64-bit with false Versions $ gulp -v [19:43:15] CLI version 3.9.1 [19:43:15] Local version 3.9.1 $ npm…
Jitendra Vyas
  • 134,556
  • 218
  • 544
  • 822
146
votes
3 answers

Vue CLI CSS pre-processor option: dart-sass VS node-sass?

When creating a new project with CLI (v3.7.0), there is an option to choose between dart-sass or node-sass compiler. How do these compare to each other, to be more specific than declared in Vue docs? A Tip on Sass Performance Note that when using…
ux.engineer
  • 5,300
  • 7
  • 43
  • 93
139
votes
17 answers

Node.js: Python not found exception due to node-sass and node-gyp

Suddenly in one of my jenkins environment build has started failing, while in local machine it seems to be working fine as i have python installed, From the logs i was able to detect that the problem is with internal dependency that is node-gyp…
Vipul Panth
  • 2,155
  • 4
  • 11
  • 26
96
votes
18 answers

npm install ->Failed at the node-sass@4.5.0 postinstall script

I'm trying to do npm install and an error appears : Failed at the node-sass@4.5.0 postinstall script. I tried to delete node_modules and then reinstall it, same error appears. what will be the solution? node v8.9.3 npm v5.4.2 ionic 3.19.0
Joe Sleiman
  • 1,908
  • 3
  • 20
  • 34
93
votes
3 answers

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

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…
Thoran
  • 7,228
  • 5
  • 35
  • 48
77
votes
13 answers

libsass bindings not found when using node-sass in nodejs

I want to use the node-sass module in my node.js v0.12 application to benefit from the performance of libsass. I executed npm i node-sass to install the module, no errors so far. Now the mess starts: If I just open the REPL in a terminal to try out…
TorbenJ
  • 4,110
  • 9
  • 41
  • 77
53
votes
4 answers

Minify CSS with Node-sass

I'm using SCSS in my NodeJS project and have my script working to turn all my seperate SCSS files into a single CSS file using the following command node-sass -w public/css/scss/style.scss public/css/style.css My only issue is that I also want the…
Matt Leach
  • 709
  • 1
  • 8
  • 13
38
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
  • 499
  • 1
  • 5
  • 12
34
votes
2 answers

The opacity value was changed to 1% after building the Reacjs project

Im building a Reactjs project and using scss instead of css. In the App.scss file, I set opacity: 87%; (note: unit is percent). Everything worked normally (the opacity value still equal 87%) when I run command: yarn start But when I run command:…
Ho Van
  • 341
  • 3
  • 5
33
votes
8 answers

error: no template named 'remove_cv_t' in namespace 'std'; did you mean 'remove_cv'?

My problem seems similar to this issue, except it happens when I run yarn install in a rails app. When I run yarn install, it runs successfully for some time, then ../src/libsass/src/ast.hpp:1614:25: warning: loop variable 'numerator' of type 'const…
stevec
  • 15,490
  • 6
  • 67
  • 110
31
votes
10 answers

Build Fails: `npm rebuild node-sass --force`

Using n to switch Node versions. I've ran yarn, npm rebuild node-sass --force many many times. And still fails. Getting this error: Node Sass could not find a binding for your current environment This usually happens because your environment has…
GN.
  • 4,948
  • 7
  • 36
  • 70
27
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
  • 21,638
  • 8
  • 62
  • 96
26
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
  • 707
  • 1
  • 7
  • 18
1
2 3
47 48