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
23
votes
6 answers

Failed at the node-sass@4.7.2 postinstall script

I just downloaded the latest version of node.js and I've been trying to do npm install on one of my projects but saying: Failed at the node-sass@4.7.2 postinstall script. I tried doing: npm rebuild node-sass --force which didn't do anything…
Simon
  • 2,498
  • 3
  • 34
  • 77
22
votes
2 answers

How to style child components in React with CSS Modules

I'm using React with SASS and CSS Modules. How can I style the children component without passing a new ClassName or something like that. For Ex. I want to position or do some styles over the child components, without having to give a specific…
k3b
  • 341
  • 1
  • 2
  • 4
21
votes
5 answers

What's the fix for Error: Node Sass version 8.0.0 is incompatible with ^4.0.0?

So, I had used sass before using npm install node-sass for my reactjs project. I'm now working on a new project and wanted to use sass again. With the same syntax npm install node-sass to get it installed, I continued to…
Jalamang Janka
  • 211
  • 1
  • 1
  • 4
21
votes
10 answers

To import Sass files, you first need to install node-sass

Running create-react-app, I get the error in my create-react-app application: To import Sass files, you first need to install node-sass. Run npm install node-sass or yarn add node-sass inside your workspace. I do have node-sass installed.…
user210757
  • 6,996
  • 17
  • 66
  • 115
21
votes
2 answers

Unable to install node-sass in my project

I am doing wes-bos Learn Node course. When I run npm start it shows - cannot find module node-sass. And when I try to run npm install node-sass --save, it gives me the following errors.
sugandh_g
  • 357
  • 2
  • 7
  • 16
21
votes
6 answers

Issue to node-sass and Docker

I'm attempting to dockerise my node application. My current application is a nodejs express server with postgresql. ExpressJS uses node-sass-middleware to handle the sass assets. When I run node and postgresql locally on my OSX machine everything…
jubeless
  • 351
  • 1
  • 3
  • 5
20
votes
7 answers

Angular 14 Error: Transform failed with 1 error: ERROR: Unterminated string token

When running ng serve I have this result: *./src/main.ts - Error: Module build failed (from./node_modules/@ngtools/webpack/src/ivy/index.js) ../.component.scss:17:100: ERROR: Unterminated string token *./src/polyfills.ts` - Error: Module build…
Thelopera
  • 305
  • 1
  • 2
  • 8
20
votes
7 answers

Node-sass is not recognized by command line

I'm trying to set up node-sass, following the instructions on CSS-Tricks. Node and npm are installed correctly, and the node-sass installation worked too. When I go to run node-sass --output-style compressed -o dist/css src/scss, though, I get an…
Sam Woolerton
  • 439
  • 2
  • 8
  • 14
19
votes
5 answers

Module build failed: Error: Cannot find module 'node-sass'

Module build failed: Error: Cannot find module 'node-sass' Also run the commands, sudo npm install node-sass --save sudo npm rebuild node-sass --force Still showing the same error. Anyone pls help.
Vishnu Nair
  • 265
  • 1
  • 4
  • 13
19
votes
2 answers

Is this possible to install node-sass offline proxy

I'm trying to install node-sass module using npm but each time an error displayed about a problem in network configuration that's because i'm using proxy and private registry this is the error : This is most likely not a problem with node-gyp or…
e2rabi
  • 4,728
  • 9
  • 42
  • 69
18
votes
9 answers

node-sass installation issue

When I try to install node-sass using npm, I get the following error message: Cannot download "https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-57_binding.node":" The command I use is: npm install node-sass --save-dev- You…
Alwin
  • 191
  • 1
  • 1
  • 8
17
votes
3 answers

SassError: Can't find stylesheet to import. - Angular upgrade

Recently I updated my angular application to version 14 and after the upgrade, I am getting the below error. The error is below ./src/assets/vendor/default/styles.scss - Error: Module build failed (from…
az rnd
  • 643
  • 3
  • 14
  • 28
17
votes
3 answers

Combine all sass files into a single file

Is there any option available in gulp-sass to combine sass files? For example: main.scss: $var: red; control.scss: @import 'main'; .a{ color: $var; } The combined output file should be single scss file like below $var: red; .a{ color:…
Yahwe Raj
  • 1,947
  • 5
  • 25
  • 37
16
votes
5 answers

Module not found: Error: Can't resolve 'fs' in React

I want to implement a SASS compiler for my online editor, for this I want to use the npm package "node-sass". However I get the error Module not found: Error: Can't resolve 'fs' in '\node_modules\fs.realpath'. I already tried to…
DeadApe
  • 416
  • 1
  • 3
  • 10
16
votes
3 answers

node-sass and sass-loader - Module build failed: TypeError: this.getResolve is not a function at Object.loader

I am simply trying to follow a tutorial which tells me to install both node-sass and sass-loader. When I do I get the following error: ERROR Failed to compile with 1 errors …
Jethro Hazelhurst
  • 3,230
  • 7
  • 38
  • 80
1 2
3
62 63