fast sass loader for Webpack
npm install fast-sass-loader
Blazingly fast sass loader for webpack.
Tips: using with fast-css-loader you will get more than 10 times css build performance
Features:
- 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)
fast sass loader for webpack. 5~10 times faster than sass-loader, and support url resolve.
Since libsass has been deprecated, fast-sass-loader will use sass instead of node-sass, you can use options.implement to specify any compatible sass compiler.
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).
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:
``javascript`
npm install fast-sass-loader --save-dev
and you need install node-sass and webpack as peer dependencies.
``
{
module: {
rules: [
{
test: /\.(scss|sass)$/,
use: [
'css-loader',
{
loader: 'fast-sass-loader',
options: {
includePaths: [ ... ]
}
}
]
},
// other loaders ...
]
}
}
``
{
module: {
loaders: [
{
test: /\.(scss|sass)$/,
loader: 'css!fast-sass'
},
// other loaders ...
]
}
}
since version 2.x, fast-sass-loader use dart-sass (npm sass) instead of original node-sass, if you want use node-sass please use this options to modify.
`js`
{
loader: 'fast-sass-loader',
options: {
implementation: require('node-sass')
}
}
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.
`javascript`
{
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.
javascript
{
loader: "fast-sass-loader",
options: {
transformers: [
{
extensions: [".json"],
transform: function(rawFile) {
return jsonToSass(rawFile);
}
}
]
}
}
`$3
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".$3
By default fast-sass-loader resolves and rewrites paths inside url(). This behavior can be turned off with resolveURLs: false option so all URLs will remain intact.Warning
$3
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:
`scss
// file: entry.scss
@import "path/to/file.sass"; // cannot import path/to/file.sass in a .scss filebody {
background: #FFF;
}
`$3
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):`sass
// a.scss
$foobar: #000;
``sass
// b.scss
@import "a.scss";
$foobar: #AAA;h1 { color: $foobar; }
``sass
// entry.scss
@import "b.scss";
@import "a.scss"; // this file will be ignore: $foobar === #AAAh2 { color: $foobar; }
// will output:
// h1 { color: #AAA; }
// h2 { color: #AAA; }
`You can use variable prefix to bypass.
$3
fast-sass-loader doesn't support
@import statement in sass rules, for example:`sass
.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 { ... }`MIT