You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
"style-loader", // creates style nodes from JS strings
50
56
"css-loader", // translates CSS into CommonJS
51
-
"sass-loader"// compiles Sass to CSS
57
+
"sass-loader"// compiles Sass to CSS, using Node Sass by default
52
58
]
53
59
}]
54
60
}
55
61
};
56
62
```
57
63
58
-
You can also pass options directly to [node-sass](https://github.com/andrew/node-sass) by specifying an `options` property like this:
64
+
You can also pass options directly to [Node Sass][] or [Dart Sass][]:
59
65
60
66
```js
61
67
// webpack.config.js
@@ -79,7 +85,54 @@ module.exports = {
79
85
};
80
86
```
81
87
82
-
See [node-sass](https://github.com/andrew/node-sass) for all available Sass options.
88
+
See [the Node Sass documentation](https://github.com/sass/node-sass/blob/master/README.md#options) for all available Sass options.
89
+
90
+
The special `implementation` option determines which implementation of Sass to
91
+
use. It takes either a [Node Sass][] or a [Dart Sass][] module. For example, to
92
+
use Dart Sass, you'd pass:
93
+
94
+
```js
95
+
// ...
96
+
{
97
+
loader:"sass-loader",
98
+
options: {
99
+
implementation:require("sass")
100
+
}
101
+
}
102
+
// ...
103
+
```
104
+
105
+
Note that when using Dart Sass, **synchronous compilation is twice as fast as
106
+
asynchronous compilation** by default, due to the overhead of asynchronous
107
+
callbacks. To avoid this overhead, you can use the
108
+
[`fibers`](https://www.npmjs.com/package/fibers) package to call asynchronous
109
+
importers from the synchronous code path. To enable this, pass the `Fiber` class
110
+
to the `fiber` option:
111
+
112
+
```js
113
+
// webpack.config.js
114
+
constFiber=require('fibers');
115
+
116
+
module.exports= {
117
+
...
118
+
module: {
119
+
rules: [{
120
+
test:/\.scss$/,
121
+
use: [{
122
+
loader:"style-loader"
123
+
}, {
124
+
loader:"css-loader"
125
+
}, {
126
+
loader:"sass-loader",
127
+
options: {
128
+
implementation:require("sass"),
129
+
fiber: Fiber
130
+
}
131
+
}]
132
+
}]
133
+
}
134
+
};
135
+
```
83
136
84
137
### In production
85
138
@@ -116,7 +169,7 @@ module.exports = {
116
169
117
170
### Imports
118
171
119
-
webpack provides an [advanced mechanism to resolve files](https://webpack.js.org/concepts/module-resolution/). The sass-loader uses node-sass' custom importer feature to pass all queries to the webpack resolving engine. Thus you can import your Sass modules from `node_modules`. Just prepend them with a `~` to tell webpack that this is not a relative import:
172
+
webpack provides an [advanced mechanism to resolve files](https://webpack.js.org/concepts/module-resolution/). The sass-loader uses Sass's custom importer feature to pass all queries to the webpack resolving engine. Thus you can import your Sass modules from `node_modules`. Just prepend them with a `~` to tell webpack that this is not a relative import:
0 commit comments