Skip to content
High performance sass loader for webpack
Branch: master
Clone or download
Latest commit 324e8d6 Jun 17, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Add outputStyle to options,which is passed to Jun 14, 2019
perf test: add benchmark test May 5, 2018
.coveralls.yml fix: add ignored *.yml Mar 18, 2017
.editorconfig init Aug 21, 2016
.gitignore fix: fix issues Dec 3, 2018
.npmignore feat: add webpack 3 support Sep 18, 2017
.travis.yml fix: remove 4.0 Aug 24, 2018 chore: add changelog Jun 17, 2019 Add outputStyle to options,which is passed to Jun 14, 2019
package.json chore: bump to 1.5.0 Jun 17, 2019


Build Status Coverage Status

Blazingly fast sass loader for webpack.

Tips: using with fast-css-loader you will get more than 10 times css build performance


fast sass loader for webpack. 5~10 times faster than sass-loader, and support url resolve.

vs sass-loader

Features fast-sass-loader sass-loader
Performance Fast (5~10 times) Slow
Sass Dedupe ×
Url Resolve × (need resolve-url-loader, it's buggy)
Loader Config ×
Source Map ×
Internal Cache ×


performance benchmark (run npm run perf):


Since the sass-loader doesn't dedupe repeated sass files, the result will be very very large (6.95MB!!!), and the total compile time takes 64.9 seconds (nearly 6 times longer than fast-sass-loader).

Why fast-sass-loader is faster than sass-loader ?

  1. Support sass file dedupe, so node-sass won't compile same file repeatedly, the performance improvement is s ignificant when your sass files number grows very large.
  2. Before node-sass compile, fast-sass-loader will merge all sass files into a single file, so node-sass only need to compile one large file, it's faster than @importer of libsass.
  3. The internal cache will store all result for every entry, only compile sass when related file changed.


install by npm:

npm install fast-sass-loader --save-dev

and you need install node-sass and webpack as peer dependencies.


webpack 2, 3 and 4:

  module: {
    rules: [
        test: /\.(scss|sass)$/,
        use: [
            loader: 'fast-sass-loader',
            options: {
              includePaths: [ ... ]
      // other loaders ...

webpack 1:

  module: {
    loaders: [
        test: /\.(scss|sass)$/,
        loader: 'css!fast-sass'
      // other loaders ...



An array of paths that node-sass can look in to attempt to resolve your @import declarations. When using data, it is recommended that you use this.


If you want to prepend Sass code before the actual entry file, you can set the data option. In this case, the loader will not override the data option but just append the entry's content. This is especially useful when some of your Sass variables depend on the environment:

    loader: "fast-sass-loader",
    options: {
        data: "$env: " + process.env.NODE_ENV + ";"

Please note: Since you're injecting code, this will break the source mappings in your entry file. Often there's a simpler solution than this.


If you want to import files that aren't basic Sass or css files, you can use the transformers option. This option takes an array of transformer entries, each with a list of file extensions and a tranform function. If an imported file's extension matches one of the transformers' extensions, the file contents will be passed to the corresponding transform function. Your transform function should return a sass string that will be directly written into your compiled Sass file. This is especially useful if you use .json files to share your basic styles across platforms and you'd like to import your .json files directly into your Sass.

    loader: "fast-sass-loader",
    options: {
        transformers: [
                extensions: [".json"],
                transform: function(rawFile) {
                    return jsonToSass(rawFile);


The outputStyle option is passed to the render method of node-sass. See node-sass OutputStyle. This can be used to create smaller css files if set to "compressed".


Mixing import .scss and.sass file is not allowed

Since fast-sass-loader will parse @import and merge all files into single sass file, you cannot import .scss file from .sass (or opposite).

For example:

// file: entry.scss
@import "path/to/file.sass";  // cannot import `path/to/file.sass` in a `.scss` file

body {
  background: #FFF;

Avoid same variable name in different sass files

Since fast-sass-loader will dedupe sass file, later imported file will be ignored. Using same variable name in different sass fill would produce unexpected output.

For example (compile entry.scss with fast-sass-loader):

// a.scss
$foobar: #000;
// b.scss
@import "a.scss";
$foobar: #AAA;

h1 { color: $foobar; }
// entry.scss
@import "b.scss";
@import "a.scss"; // this file will be ignore: $foobar === #AAA

h2 { color: $foobar; }

// will output:
// h1 { color: #AAA; }
// h2 { color: #AAA; }

You can use variable prefix to bypass.

Avoid nested @import in sass rules

fast-sass-loader doesn't support @import statement in sass rules, for example:

.a {
  @import 'group'

.b {
  @import 'group'

you should wrap the rules that you want to import with mixin, then include them in your .a { ... } or .b { ... }



You can’t perform that action at this time.