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
0
votes
1 answer

How to write SCSS function to access file system?

I'm using Broccoli (which uses node-sass) to compile SCSS code for an Ember project, and I'd like to create a SCSS function that reads a named file from the file system, processes it, and returns the result. So far I haven't been able to find any…
exupero
  • 9,136
  • 8
  • 47
  • 63
0
votes
1 answer

issues with node-sass on openshift

im trying to get node-sass running in my openshift app. the npm log shows this on push/deploy: remote: npm info install node-sass@2.0.0-beta remote: remote: > node-sass@2.0.0-beta install…
aschmid00
  • 7,038
  • 2
  • 47
  • 66
0
votes
1 answer

Docpad (on Mac) livereload does not recompile scss when a referenced scss file changes

Repro steps are as follows: I have a main.css.scss file that looks like this: @import "defaults"; I have a _defaults.scss file that looks like this: body { background: #FFF; } When I first start the site, everything looks good. If I change…
Christopher Davies
  • 4,461
  • 2
  • 34
  • 33
0
votes
1 answer

How do I deploy to nodejitsu while depending on node-sass?

I am trying to deploy my ChucK Demos application to Nodejitsu, but am stuck due to node-sass 1.2.3 not compiling on their platform (SunOS). Can I work around this problem somehow? Error looks like this: ./src/libsass/json.cpp:159:18: error:…
aknuds1
  • 65,625
  • 67
  • 195
  • 317
0
votes
1 answer

Automagic compilation of SASS with Express

I'm getting used to Express and various other node-related frameworks as I find it interesting and more lightweight than the ASP MVC world.. and one of the first things I'm trying to do is get SASS files automagically compiling into CSS files. I've…
Dan
  • 10,282
  • 2
  • 37
  • 64
-1
votes
1 answer

How to install node-sass library in Angular application

In my angular 6 application we are using node-sass library 4.9.3. I am trying to do ng build, it gives me an error, Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93) For more information on…
user1015388
  • 1,283
  • 4
  • 25
  • 45
-1
votes
1 answer

Error when switching from node-sass to sass(dart-sass) on Angular 10

I am using Angular version 10.2.0, NodeJs 14.17.3 and would like to switch from node-sass to package sass (formerly dart-sass). I uninstalled node-sass, deleted node_modules, cleared npm cache, npm install and installed sass. When I run the program,…
user10114552
-1
votes
1 answer

using `sass` to `@import` or `@use` css file in a classname with `cra 4`

I am using sass: 1.4.x and with create-react-app 4.. all i am doing it import a css file in a custom class and my file is not getting imported.. .umaiShopDashBoardParent { @import '~react-dates/lib/css/_datepicker.css'; } as attached in the…
Murtaza Hussain
  • 3,851
  • 24
  • 30
-1
votes
1 answer

How do I resolve the node sass install error

npm ERR! gyp ERR! node -v v16.3.0 npm ERR! gyp ERR! node-gyp -v v3.8.0 npm ERR! gyp ERR! not ok npm ERR! Build failed with error code: 1
-1
votes
1 answer

Node Sass failing to install

I tried installing Node sass in my react app by running npm install node-sass It failed with an error Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. I've…
Dansiecrown
  • 33
  • 1
  • 6
-1
votes
1 answer

I can set a multiple options on one variable in sass and use it?

Let me explain myself, i wanna do something like this in my code $varible:{ display: inline-block; width: 14px; height: 14px; } .circle{ &:nth-child(1){ &::after{ $varible; position:absolute; ... } …
Jesus Cabrita
  • 325
  • 1
  • 7
  • 18
-1
votes
1 answer

SASS bug with compilation

I'm new in StackOverflow and I'm a beginner in web development thank advance for your comprehension. I have problem with SASS it tells me well in my terminal that it compiles my code on my main.css but this shows me the result only a few times on…
-1
votes
1 answer

Using autoprefixer in node-sass

I've been stuck in the error I encounter when I try to use autoprefixer to prefix my css. Below is my package.json file. Screenshot { "name": "natours", "version": "1.0.0", "description": "Landing page for natours", "main": "index.js", …
-1
votes
2 answers

symfony webpacke encore node-sass install error

I am cloning the Symfony project form git repository. Project is using webpack encore. git clone composer install npm install but this produce error in node-sass
mardon
  • 1,065
  • 1
  • 11
  • 29
-1
votes
1 answer

broccoli-sass, node-sass, breakpoint-sass

I'm trying to use breakpoint-sass with broccoli-sass in my Ember CLI project, but when using @include breakpoint(100px) it crashes with the following error: cannot add or subtract numbers with incompatible units [string exception] It's simple to…
Tim Baas
  • 6,035
  • 5
  • 45
  • 72
1 2 3
62
63