@4c/fast-sass-loader 中文文档教程

Question

fast-sass-loader

用于 webpack 的超快 sass 加载器。

提示：使用 fast-css-loader 你将获得超过 10 倍的 css 构建性能

特性：

• 5~10 times faster than sass-loader in large sass project
• support sass file dedupe, never worry about @import same file in different place
• support url resolve, never worry about the problem with url(...) (see https://github.com/webpack-contrib/sass-loader#problems-with-url)

用于 webpack 的快速 sass 加载器。 比sass-loader快5~10倍，支持url解析。

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

性能基准（运行 npm run perf）：

由于 sass-loader 不会对重复的 sass 文件进行重复数据删除，因此结果会非常非常大（6.95MB!!!），总编译时间需要 64.9 秒（将近比 fast-sass-loader 长 6 倍）。

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

通过 npm 安装：

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

您需要安装 node-sass 和 webpack 作为对等依赖项。

Configration

webpack 2, 3 and 4:

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

webpack 1:

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

Options

includePaths:

node-sass 可以查看的一组路径，以尝试解析您的 @import 声明。 在使用数据的时候，推荐大家使用这个。

data:

如果你想在实际入口文件之前添加 Sass 代码，你可以设置数据选项。 在这种情况下，加载程序不会覆盖数据选项，而只是附加条目的内容。 当您的某些 Sass 变量依赖于环境时，这尤其有用：

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

请注意：由于您正在注入代码，这将破坏您的入口文件中的源映射。 通常有比这更简单的解决方案。

transformers:

如果你想导入不是基本 Sass 或 css 文件的文件，你可以使用 transformers 选项。 此选项采用一组转换器条目，每个条目都有一个文件扩展名列表和一个转换函数。 如果导入文件的扩展名与其中一个转换器的扩展名匹配，则文件内容将传递给相应的转换函数。 你的转换函数应该返回一个 sass 字符串，它将直接写入你编译的 Sass 文件中。 如果你使用 .json 文件来跨平台共享你的基本样式并且你想将你的 .json 文件直接导入到你的 Sass 中，这将特别有用。

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

Warning

Mixing import .scss and.sass file is not allowed

由于 fast-sass-loader 将解析 @import 并将所有文件合并到单个 sass 文件中，因此您不能从 导入 .scss 文件.sass （或相反）。

例如：

// 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

由于 fast-sass-loader 会去重 sass 文件，之后导入的文件将被忽略。 在不同的 sass 填充中使用相同的变量名会产生意外的输出。

例如（用fast-sass-loader编译entry.scss）：

// 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; }

可以使用变量前缀来绕过。

Avoid nested @import in sass rules

fast-sass-loader 不支持 sass 规则中的 @import 语句，例如：

.a {
  @import 'group'
}

.b {
  @import 'group'
}

您应该使用 mixin 包装要导入的规则，然后将它们包含在您的 .a { ... 或 .b { ... }

License

麻省理工学院