sass-loader 10.0.4 → 10.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +28 -0
- package/README.md +96 -60
- package/dist/SassError.js +2 -2
- package/dist/cjs.js +1 -1
- package/dist/index.js +20 -9
- package/dist/utils.js +69 -60
- package/package.json +16 -16
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,34 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
## [10.2.0](https://github.com/webpack-contrib/sass-loader/compare/v10.1.1...v10.2.0) (2021-05-10)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* support `node-sass` v6 ([dbbbdde](https://github.com/webpack-contrib/sass-loader/commit/dbbbdde8d73b5ebac89fdc3ca7009a644a471c5f))
|
|
11
|
+
|
|
12
|
+
### [10.1.1](https://github.com/webpack-contrib/sass-loader/compare/v10.1.0...v10.1.1) (2021-01-11)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
|
|
17
|
+
* problem with resolving and the `includePaths` option ([#913](https://github.com/webpack-contrib/sass-loader/issues/913)) ([cadc75e](https://github.com/webpack-contrib/sass-loader/commit/cadc75e80caf7d32ea47de1cbaab639f9204c0eb))
|
|
18
|
+
|
|
19
|
+
## [10.1.0](https://github.com/webpack-contrib/sass-loader/compare/v10.0.5...v10.1.0) (2020-11-11)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### Features
|
|
23
|
+
|
|
24
|
+
* allow the `additionalData` to be async ([#902](https://github.com/webpack-contrib/sass-loader/issues/902)) ([9d925ff](https://github.com/webpack-contrib/sass-loader/commit/9d925ff794e1e4cb9db253a6867bfa2405ec3428))
|
|
25
|
+
|
|
26
|
+
### [10.0.5](https://github.com/webpack-contrib/sass-loader/compare/v10.0.4...v10.0.5) (2020-11-02)
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
### Bug Fixes
|
|
30
|
+
|
|
31
|
+
* support node-sass v5.0.0 ([#899](https://github.com/webpack-contrib/sass-loader/issues/899)) ([c3e279f](https://github.com/webpack-contrib/sass-loader/commit/c3e279fb4668fce4c597a6c8cd1d0f2ff8bc95e5))
|
|
32
|
+
|
|
5
33
|
### [10.0.4](https://github.com/webpack-contrib/sass-loader/compare/v10.0.3...v10.0.4) (2020-10-22)
|
|
6
34
|
|
|
7
35
|
|
package/README.md
CHANGED
|
@@ -42,7 +42,7 @@ Then add the loader to your Webpack configuration. For example:
|
|
|
42
42
|
**app.js**
|
|
43
43
|
|
|
44
44
|
```js
|
|
45
|
-
import
|
|
45
|
+
import "./style.scss";
|
|
46
46
|
```
|
|
47
47
|
|
|
48
48
|
**style.scss**
|
|
@@ -65,11 +65,11 @@ module.exports = {
|
|
|
65
65
|
test: /\.s[ac]ss$/i,
|
|
66
66
|
use: [
|
|
67
67
|
// Creates `style` nodes from JS strings
|
|
68
|
-
|
|
68
|
+
"style-loader",
|
|
69
69
|
// Translates CSS into CommonJS
|
|
70
|
-
|
|
70
|
+
"css-loader",
|
|
71
71
|
// Compiles Sass to CSS
|
|
72
|
-
|
|
72
|
+
"sass-loader",
|
|
73
73
|
],
|
|
74
74
|
},
|
|
75
75
|
],
|
|
@@ -86,7 +86,7 @@ Webpack provides an [advanced mechanism to resolve files](https://webpack.js.org
|
|
|
86
86
|
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:
|
|
87
87
|
|
|
88
88
|
```scss
|
|
89
|
-
@import
|
|
89
|
+
@import "~bootstrap";
|
|
90
90
|
```
|
|
91
91
|
|
|
92
92
|
It's important to only prepend it with `~`, because `~/` resolves to the home directory.
|
|
@@ -148,7 +148,7 @@ Example where the `sass-loader` loader uses the `node-sass` implementation:
|
|
|
148
148
|
{
|
|
149
149
|
"devDependencies": {
|
|
150
150
|
"sass-loader": "^7.2.0",
|
|
151
|
-
"node-sass": "^
|
|
151
|
+
"node-sass": "^5.0.0"
|
|
152
152
|
}
|
|
153
153
|
}
|
|
154
154
|
```
|
|
@@ -167,13 +167,13 @@ module.exports = {
|
|
|
167
167
|
{
|
|
168
168
|
test: /\.s[ac]ss$/i,
|
|
169
169
|
use: [
|
|
170
|
-
|
|
171
|
-
|
|
170
|
+
"style-loader",
|
|
171
|
+
"css-loader",
|
|
172
172
|
{
|
|
173
|
-
loader:
|
|
173
|
+
loader: "sass-loader",
|
|
174
174
|
options: {
|
|
175
175
|
// Prefer `dart-sass`
|
|
176
|
-
implementation: require(
|
|
176
|
+
implementation: require("sass"),
|
|
177
177
|
},
|
|
178
178
|
},
|
|
179
179
|
],
|
|
@@ -211,12 +211,12 @@ module.exports = {
|
|
|
211
211
|
{
|
|
212
212
|
test: /\.s[ac]ss$/i,
|
|
213
213
|
use: [
|
|
214
|
-
|
|
215
|
-
|
|
214
|
+
"style-loader",
|
|
215
|
+
"css-loader",
|
|
216
216
|
{
|
|
217
|
-
loader:
|
|
217
|
+
loader: "sass-loader",
|
|
218
218
|
options: {
|
|
219
|
-
implementation: require(
|
|
219
|
+
implementation: require("sass"),
|
|
220
220
|
sassOptions: {
|
|
221
221
|
fiber: false,
|
|
222
222
|
},
|
|
@@ -240,14 +240,14 @@ module.exports = {
|
|
|
240
240
|
{
|
|
241
241
|
test: /\.s[ac]ss$/i,
|
|
242
242
|
use: [
|
|
243
|
-
|
|
244
|
-
|
|
243
|
+
"style-loader",
|
|
244
|
+
"css-loader",
|
|
245
245
|
{
|
|
246
|
-
loader:
|
|
246
|
+
loader: "sass-loader",
|
|
247
247
|
options: {
|
|
248
|
-
implementation: require(
|
|
248
|
+
implementation: require("sass"),
|
|
249
249
|
sassOptions: {
|
|
250
|
-
fiber: require(
|
|
250
|
+
fiber: require("fibers"),
|
|
251
251
|
},
|
|
252
252
|
},
|
|
253
253
|
},
|
|
@@ -293,14 +293,14 @@ module.exports = {
|
|
|
293
293
|
{
|
|
294
294
|
test: /\.s[ac]ss$/i,
|
|
295
295
|
use: [
|
|
296
|
-
|
|
297
|
-
|
|
296
|
+
"style-loader",
|
|
297
|
+
"css-loader",
|
|
298
298
|
{
|
|
299
|
-
loader:
|
|
299
|
+
loader: "sass-loader",
|
|
300
300
|
options: {
|
|
301
301
|
sassOptions: {
|
|
302
302
|
indentWidth: 4,
|
|
303
|
-
includePaths: [
|
|
303
|
+
includePaths: ["absolute/path/a", "absolute/path/b"],
|
|
304
304
|
},
|
|
305
305
|
},
|
|
306
306
|
},
|
|
@@ -322,24 +322,24 @@ module.exports = {
|
|
|
322
322
|
{
|
|
323
323
|
test: /\.s[ac]ss$/i,
|
|
324
324
|
use: [
|
|
325
|
-
|
|
326
|
-
|
|
325
|
+
"style-loader",
|
|
326
|
+
"css-loader",
|
|
327
327
|
{
|
|
328
|
-
loader:
|
|
328
|
+
loader: "sass-loader",
|
|
329
329
|
options: {
|
|
330
330
|
sassOptions: (loaderContext) => {
|
|
331
331
|
// More information about available properties https://webpack.js.org/api/loaders/
|
|
332
332
|
const { resourcePath, rootContext } = loaderContext;
|
|
333
333
|
const relativePath = path.relative(rootContext, resourcePath);
|
|
334
334
|
|
|
335
|
-
if (relativePath ===
|
|
335
|
+
if (relativePath === "styles/foo.scss") {
|
|
336
336
|
return {
|
|
337
|
-
includePaths: [
|
|
337
|
+
includePaths: ["absolute/path/c", "absolute/path/d"],
|
|
338
338
|
};
|
|
339
339
|
}
|
|
340
340
|
|
|
341
341
|
return {
|
|
342
|
-
includePaths: [
|
|
342
|
+
includePaths: ["absolute/path/a", "absolute/path/b"],
|
|
343
343
|
};
|
|
344
344
|
},
|
|
345
345
|
},
|
|
@@ -372,15 +372,15 @@ module.exports = {
|
|
|
372
372
|
{
|
|
373
373
|
test: /\.s[ac]ss$/i,
|
|
374
374
|
use: [
|
|
375
|
-
|
|
375
|
+
"style-loader",
|
|
376
376
|
{
|
|
377
|
-
loader:
|
|
377
|
+
loader: "css-loader",
|
|
378
378
|
options: {
|
|
379
379
|
sourceMap: true,
|
|
380
380
|
},
|
|
381
381
|
},
|
|
382
382
|
{
|
|
383
|
-
loader:
|
|
383
|
+
loader: "sass-loader",
|
|
384
384
|
options: {
|
|
385
385
|
sourceMap: true,
|
|
386
386
|
},
|
|
@@ -405,14 +405,14 @@ module.exports = {
|
|
|
405
405
|
{
|
|
406
406
|
test: /\.s[ac]ss$/i,
|
|
407
407
|
use: [
|
|
408
|
-
|
|
409
|
-
|
|
408
|
+
"style-loader",
|
|
409
|
+
"css-loader",
|
|
410
410
|
{
|
|
411
|
-
loader:
|
|
411
|
+
loader: "sass-loader",
|
|
412
412
|
options: {
|
|
413
413
|
sourceMap: true,
|
|
414
414
|
sassOptions: {
|
|
415
|
-
outputStyle:
|
|
415
|
+
outputStyle: "compressed",
|
|
416
416
|
},
|
|
417
417
|
},
|
|
418
418
|
},
|
|
@@ -442,12 +442,12 @@ module.exports = {
|
|
|
442
442
|
{
|
|
443
443
|
test: /\.s[ac]ss$/i,
|
|
444
444
|
use: [
|
|
445
|
-
|
|
446
|
-
|
|
445
|
+
"style-loader",
|
|
446
|
+
"css-loader",
|
|
447
447
|
{
|
|
448
|
-
loader:
|
|
448
|
+
loader: "sass-loader",
|
|
449
449
|
options: {
|
|
450
|
-
additionalData:
|
|
450
|
+
additionalData: "$env: " + process.env.NODE_ENV + ";",
|
|
451
451
|
},
|
|
452
452
|
},
|
|
453
453
|
],
|
|
@@ -459,6 +459,8 @@ module.exports = {
|
|
|
459
459
|
|
|
460
460
|
#### `Function`
|
|
461
461
|
|
|
462
|
+
##### Sync
|
|
463
|
+
|
|
462
464
|
```js
|
|
463
465
|
module.exports = {
|
|
464
466
|
module: {
|
|
@@ -466,21 +468,55 @@ module.exports = {
|
|
|
466
468
|
{
|
|
467
469
|
test: /\.s[ac]ss$/i,
|
|
468
470
|
use: [
|
|
469
|
-
|
|
470
|
-
|
|
471
|
+
"style-loader",
|
|
472
|
+
"css-loader",
|
|
471
473
|
{
|
|
472
|
-
loader:
|
|
474
|
+
loader: "sass-loader",
|
|
473
475
|
options: {
|
|
474
476
|
additionalData: (content, loaderContext) => {
|
|
475
477
|
// More information about available properties https://webpack.js.org/api/loaders/
|
|
476
478
|
const { resourcePath, rootContext } = loaderContext;
|
|
477
479
|
const relativePath = path.relative(rootContext, resourcePath);
|
|
478
480
|
|
|
479
|
-
if (relativePath ===
|
|
480
|
-
return
|
|
481
|
+
if (relativePath === "styles/foo.scss") {
|
|
482
|
+
return "$value: 100px;" + content;
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
return "$value: 200px;" + content;
|
|
486
|
+
},
|
|
487
|
+
},
|
|
488
|
+
},
|
|
489
|
+
],
|
|
490
|
+
},
|
|
491
|
+
],
|
|
492
|
+
},
|
|
493
|
+
};
|
|
494
|
+
```
|
|
495
|
+
|
|
496
|
+
##### Async
|
|
497
|
+
|
|
498
|
+
```js
|
|
499
|
+
module.exports = {
|
|
500
|
+
module: {
|
|
501
|
+
rules: [
|
|
502
|
+
{
|
|
503
|
+
test: /\.s[ac]ss$/i,
|
|
504
|
+
use: [
|
|
505
|
+
"style-loader",
|
|
506
|
+
"css-loader",
|
|
507
|
+
{
|
|
508
|
+
loader: "sass-loader",
|
|
509
|
+
options: {
|
|
510
|
+
additionalData: async (content, loaderContext) => {
|
|
511
|
+
// More information about available properties https://webpack.js.org/api/loaders/
|
|
512
|
+
const { resourcePath, rootContext } = loaderContext;
|
|
513
|
+
const relativePath = path.relative(rootContext, resourcePath);
|
|
514
|
+
|
|
515
|
+
if (relativePath === "styles/foo.scss") {
|
|
516
|
+
return "$value: 100px;" + content;
|
|
481
517
|
}
|
|
482
518
|
|
|
483
|
-
return
|
|
519
|
+
return "$value: 200px;" + content;
|
|
484
520
|
},
|
|
485
521
|
},
|
|
486
522
|
},
|
|
@@ -510,10 +546,10 @@ module.exports = {
|
|
|
510
546
|
{
|
|
511
547
|
test: /\.s[ac]ss$/i,
|
|
512
548
|
use: [
|
|
513
|
-
|
|
514
|
-
|
|
549
|
+
"style-loader",
|
|
550
|
+
"css-loader",
|
|
515
551
|
{
|
|
516
|
-
loader:
|
|
552
|
+
loader: "sass-loader",
|
|
517
553
|
options: {
|
|
518
554
|
webpackImporter: false,
|
|
519
555
|
},
|
|
@@ -539,7 +575,7 @@ There are two possibilities to extract a style sheet from the bundle:
|
|
|
539
575
|
**webpack.config.js**
|
|
540
576
|
|
|
541
577
|
```js
|
|
542
|
-
const MiniCssExtractPlugin = require(
|
|
578
|
+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
|
543
579
|
|
|
544
580
|
module.exports = {
|
|
545
581
|
module: {
|
|
@@ -548,11 +584,11 @@ module.exports = {
|
|
|
548
584
|
test: /\.s[ac]ss$/i,
|
|
549
585
|
use: [
|
|
550
586
|
// fallback to style-loader in development
|
|
551
|
-
process.env.NODE_ENV !==
|
|
552
|
-
?
|
|
587
|
+
process.env.NODE_ENV !== "production"
|
|
588
|
+
? "style-loader"
|
|
553
589
|
: MiniCssExtractPlugin.loader,
|
|
554
|
-
|
|
555
|
-
|
|
590
|
+
"css-loader",
|
|
591
|
+
"sass-loader",
|
|
556
592
|
],
|
|
557
593
|
},
|
|
558
594
|
],
|
|
@@ -561,8 +597,8 @@ module.exports = {
|
|
|
561
597
|
new MiniCssExtractPlugin({
|
|
562
598
|
// Options similar to the same options in webpackOptions.output
|
|
563
599
|
// both options are optional
|
|
564
|
-
filename:
|
|
565
|
-
chunkFilename:
|
|
600
|
+
filename: "[name].css",
|
|
601
|
+
chunkFilename: "[id].css",
|
|
566
602
|
}),
|
|
567
603
|
],
|
|
568
604
|
};
|
|
@@ -578,21 +614,21 @@ To enable CSS source maps, you'll need to pass the `sourceMap` option to the `sa
|
|
|
578
614
|
|
|
579
615
|
```javascript
|
|
580
616
|
module.exports = {
|
|
581
|
-
devtool:
|
|
617
|
+
devtool: "source-map", // any "source-map"-like devtool is possible
|
|
582
618
|
module: {
|
|
583
619
|
rules: [
|
|
584
620
|
{
|
|
585
621
|
test: /\.s[ac]ss$/i,
|
|
586
622
|
use: [
|
|
587
|
-
|
|
623
|
+
"style-loader",
|
|
588
624
|
{
|
|
589
|
-
loader:
|
|
625
|
+
loader: "css-loader",
|
|
590
626
|
options: {
|
|
591
627
|
sourceMap: true,
|
|
592
628
|
},
|
|
593
629
|
},
|
|
594
630
|
{
|
|
595
|
-
loader:
|
|
631
|
+
loader: "sass-loader",
|
|
596
632
|
options: {
|
|
597
633
|
sourceMap: true,
|
|
598
634
|
},
|
package/dist/SassError.js
CHANGED
|
@@ -8,7 +8,7 @@ exports.default = void 0;
|
|
|
8
8
|
class SassError extends Error {
|
|
9
9
|
constructor(sassError) {
|
|
10
10
|
super();
|
|
11
|
-
this.name =
|
|
11
|
+
this.name = "SassError";
|
|
12
12
|
this.originalSassError = sassError;
|
|
13
13
|
this.loc = {
|
|
14
14
|
line: sassError.line,
|
|
@@ -18,7 +18,7 @@ class SassError extends Error {
|
|
|
18
18
|
this.message = `${this.name}: ${this.originalSassError.message}`;
|
|
19
19
|
|
|
20
20
|
if (this.originalSassError.formatted) {
|
|
21
|
-
this.message = `${this.name}: ${this.originalSassError.formatted.replace(/^Error: /,
|
|
21
|
+
this.message = `${this.name}: ${this.originalSassError.formatted.replace(/^Error: /, "")}`; // Instruct webpack to hide the JS stack from the console.
|
|
22
22
|
// Usually you're only interested in the SASS stack in this case.
|
|
23
23
|
|
|
24
24
|
this.hideStack = true;
|
package/dist/cjs.js
CHANGED
package/dist/index.js
CHANGED
|
@@ -25,16 +25,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
25
25
|
* @this {object}
|
|
26
26
|
* @param {string} content
|
|
27
27
|
*/
|
|
28
|
-
function loader(content) {
|
|
28
|
+
async function loader(content) {
|
|
29
29
|
const options = (0, _loaderUtils.getOptions)(this);
|
|
30
30
|
(0, _schemaUtils.validate)(_options.default, options, {
|
|
31
|
-
name:
|
|
32
|
-
baseDataPath:
|
|
31
|
+
name: "Sass Loader",
|
|
32
|
+
baseDataPath: "options"
|
|
33
33
|
});
|
|
34
|
-
const
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
|
|
34
|
+
const callback = this.async();
|
|
35
|
+
const implementation = (0, _utils.getSassImplementation)(this, options.implementation);
|
|
36
|
+
|
|
37
|
+
if (!implementation) {
|
|
38
|
+
callback();
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const useSourceMap = typeof options.sourceMap === "boolean" ? options.sourceMap : this.sourceMap;
|
|
43
|
+
const sassOptions = await (0, _utils.getSassOptions)(this, options, content, implementation, useSourceMap);
|
|
44
|
+
const shouldUseWebpackImporter = typeof options.webpackImporter === "boolean" ? options.webpackImporter : true;
|
|
38
45
|
|
|
39
46
|
if (shouldUseWebpackImporter) {
|
|
40
47
|
const {
|
|
@@ -43,7 +50,6 @@ function loader(content) {
|
|
|
43
50
|
sassOptions.importer.push((0, _utils.getWebpackImporter)(this, implementation, includePaths));
|
|
44
51
|
}
|
|
45
52
|
|
|
46
|
-
const callback = this.async();
|
|
47
53
|
const render = (0, _utils.getRenderFunctionFromSassImplementation)(implementation);
|
|
48
54
|
render(sassOptions, (error, result) => {
|
|
49
55
|
if (error) {
|
|
@@ -64,7 +70,12 @@ function loader(content) {
|
|
|
64
70
|
}
|
|
65
71
|
|
|
66
72
|
result.stats.includedFiles.forEach(includedFile => {
|
|
67
|
-
|
|
73
|
+
const normalizedIncludedFile = _path.default.normalize(includedFile); // Custom `importer` can return only `contents` so includedFile will be relative
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
if (_path.default.isAbsolute(normalizedIncludedFile)) {
|
|
77
|
+
this.addDependency(normalizedIncludedFile);
|
|
78
|
+
}
|
|
68
79
|
});
|
|
69
80
|
callback(null, result.css.toString(), map);
|
|
70
81
|
});
|
package/dist/utils.js
CHANGED
|
@@ -25,17 +25,17 @@ var _neoAsync = _interopRequireDefault(require("neo-async"));
|
|
|
25
25
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
26
26
|
|
|
27
27
|
function getDefaultSassImplementation() {
|
|
28
|
-
let sassImplPkg =
|
|
28
|
+
let sassImplPkg = "sass";
|
|
29
29
|
|
|
30
30
|
try {
|
|
31
|
-
require.resolve(
|
|
31
|
+
require.resolve("sass");
|
|
32
32
|
} catch (error) {
|
|
33
33
|
try {
|
|
34
|
-
require.resolve(
|
|
34
|
+
require.resolve("node-sass");
|
|
35
35
|
|
|
36
|
-
sassImplPkg =
|
|
36
|
+
sassImplPkg = "node-sass";
|
|
37
37
|
} catch (ignoreError) {
|
|
38
|
-
sassImplPkg =
|
|
38
|
+
sassImplPkg = "sass";
|
|
39
39
|
}
|
|
40
40
|
} // eslint-disable-next-line import/no-dynamic-require, global-require
|
|
41
41
|
|
|
@@ -49,12 +49,16 @@ function getDefaultSassImplementation() {
|
|
|
49
49
|
*/
|
|
50
50
|
|
|
51
51
|
|
|
52
|
-
function getSassImplementation(implementation) {
|
|
52
|
+
function getSassImplementation(loaderContext, implementation) {
|
|
53
53
|
let resolvedImplementation = implementation;
|
|
54
54
|
|
|
55
55
|
if (!resolvedImplementation) {
|
|
56
|
-
|
|
57
|
-
|
|
56
|
+
try {
|
|
57
|
+
resolvedImplementation = getDefaultSassImplementation();
|
|
58
|
+
} catch (error) {
|
|
59
|
+
loaderContext.emitError(error);
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
58
62
|
}
|
|
59
63
|
|
|
60
64
|
const {
|
|
@@ -62,44 +66,46 @@ function getSassImplementation(implementation) {
|
|
|
62
66
|
} = resolvedImplementation;
|
|
63
67
|
|
|
64
68
|
if (!info) {
|
|
65
|
-
|
|
69
|
+
loaderContext.emitError(new Error("Unknown Sass implementation."));
|
|
70
|
+
return;
|
|
66
71
|
}
|
|
67
72
|
|
|
68
|
-
const infoParts = info.split(
|
|
73
|
+
const infoParts = info.split("\t");
|
|
69
74
|
|
|
70
75
|
if (infoParts.length < 2) {
|
|
71
|
-
|
|
76
|
+
loaderContext.emitError(new Error(`Unknown Sass implementation "${info}".`));
|
|
77
|
+
return;
|
|
72
78
|
}
|
|
73
79
|
|
|
74
80
|
const [implementationName, version] = infoParts;
|
|
75
81
|
|
|
76
|
-
if (implementationName ===
|
|
77
|
-
if (!_semver.default.satisfies(version,
|
|
78
|
-
|
|
79
|
-
}
|
|
82
|
+
if (implementationName === "dart-sass") {
|
|
83
|
+
if (!_semver.default.satisfies(version, "^1.3.0")) {
|
|
84
|
+
loaderContext.emitError(new Error(`Dart Sass version ${version} is incompatible with ^1.3.0.`));
|
|
85
|
+
} // eslint-disable-next-line consistent-return
|
|
86
|
+
|
|
80
87
|
|
|
81
88
|
return resolvedImplementation;
|
|
82
|
-
} else if (implementationName ===
|
|
83
|
-
if (!_semver.default.satisfies(version,
|
|
84
|
-
|
|
85
|
-
}
|
|
89
|
+
} else if (implementationName === "node-sass") {
|
|
90
|
+
if (!_semver.default.satisfies(version, "^4.0.0 || ^5.0.0 || ^6.0.0")) {
|
|
91
|
+
loaderContext.emitError(new Error(`Node Sass version ${version} is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0.`));
|
|
92
|
+
} // eslint-disable-next-line consistent-return
|
|
93
|
+
|
|
86
94
|
|
|
87
95
|
return resolvedImplementation;
|
|
88
96
|
}
|
|
89
97
|
|
|
90
|
-
|
|
98
|
+
loaderContext.emitError(new Error(`Unknown Sass implementation "${implementationName}".`));
|
|
91
99
|
}
|
|
92
100
|
|
|
93
101
|
function isProductionLikeMode(loaderContext) {
|
|
94
|
-
return loaderContext.mode ===
|
|
102
|
+
return loaderContext.mode === "production" || !loaderContext.mode;
|
|
95
103
|
}
|
|
96
104
|
|
|
97
105
|
function proxyCustomImporters(importers, loaderContext) {
|
|
98
|
-
return [].concat(importers).map(importer => {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
return importer.apply(this, args);
|
|
102
|
-
};
|
|
106
|
+
return [].concat(importers).map(importer => function proxyImporter(...args) {
|
|
107
|
+
this.webpackLoaderContext = loaderContext;
|
|
108
|
+
return importer.apply(this, args);
|
|
103
109
|
});
|
|
104
110
|
}
|
|
105
111
|
/**
|
|
@@ -114,9 +120,9 @@ function proxyCustomImporters(importers, loaderContext) {
|
|
|
114
120
|
*/
|
|
115
121
|
|
|
116
122
|
|
|
117
|
-
function getSassOptions(loaderContext, loaderOptions, content, implementation, useSourceMap) {
|
|
118
|
-
const options = (0, _full.klona)(loaderOptions.sassOptions ? typeof loaderOptions.sassOptions ===
|
|
119
|
-
const isDartSass = implementation.info.includes(
|
|
123
|
+
async function getSassOptions(loaderContext, loaderOptions, content, implementation, useSourceMap) {
|
|
124
|
+
const options = (0, _full.klona)(loaderOptions.sassOptions ? typeof loaderOptions.sassOptions === "function" ? loaderOptions.sassOptions(loaderContext) || {} : loaderOptions.sassOptions : {});
|
|
125
|
+
const isDartSass = implementation.info.includes("dart-sass");
|
|
120
126
|
|
|
121
127
|
if (isDartSass) {
|
|
122
128
|
const shouldTryToResolveFibers = !options.fiber && options.fiber !== false;
|
|
@@ -125,7 +131,7 @@ function getSassOptions(loaderContext, loaderOptions, content, implementation, u
|
|
|
125
131
|
let fibers;
|
|
126
132
|
|
|
127
133
|
try {
|
|
128
|
-
fibers = require.resolve(
|
|
134
|
+
fibers = require.resolve("fibers");
|
|
129
135
|
} catch (_error) {// Nothing
|
|
130
136
|
}
|
|
131
137
|
|
|
@@ -143,10 +149,10 @@ function getSassOptions(loaderContext, loaderOptions, content, implementation, u
|
|
|
143
149
|
}
|
|
144
150
|
|
|
145
151
|
options.file = loaderContext.resourcePath;
|
|
146
|
-
options.data = loaderOptions.additionalData ? typeof loaderOptions.additionalData ===
|
|
152
|
+
options.data = loaderOptions.additionalData ? typeof loaderOptions.additionalData === "function" ? await loaderOptions.additionalData(content, loaderContext) : `${loaderOptions.additionalData}\n${content}` : content; // opt.outputStyle
|
|
147
153
|
|
|
148
154
|
if (!options.outputStyle && isProductionLikeMode(loaderContext)) {
|
|
149
|
-
options.outputStyle =
|
|
155
|
+
options.outputStyle = "compressed";
|
|
150
156
|
}
|
|
151
157
|
|
|
152
158
|
if (useSourceMap) {
|
|
@@ -157,7 +163,7 @@ function getSassOptions(loaderContext, loaderOptions, content, implementation, u
|
|
|
157
163
|
// all paths in sourceMap.sources will be relative to that path.
|
|
158
164
|
// Pretty complicated... :(
|
|
159
165
|
options.sourceMap = true;
|
|
160
|
-
options.outFile = _path.default.join(loaderContext.rootContext,
|
|
166
|
+
options.outFile = _path.default.join(loaderContext.rootContext, "style.css.map");
|
|
161
167
|
options.sourceMapContents = true;
|
|
162
168
|
options.omitSourceMapUrl = true;
|
|
163
169
|
options.sourceMapEmbed = false;
|
|
@@ -170,7 +176,7 @@ function getSassOptions(loaderContext, loaderOptions, content, implementation, u
|
|
|
170
176
|
const ext = _path.default.extname(resourcePath); // If we are compiling sass and indentedSyntax isn't set, automatically set it.
|
|
171
177
|
|
|
172
178
|
|
|
173
|
-
if (ext && ext.toLowerCase() ===
|
|
179
|
+
if (ext && ext.toLowerCase() === ".sass" && typeof options.indentedSyntax === "undefined") {
|
|
174
180
|
options.indentedSyntax = true;
|
|
175
181
|
} else {
|
|
176
182
|
options.indentedSyntax = Boolean(options.indentedSyntax);
|
|
@@ -178,7 +184,8 @@ function getSassOptions(loaderContext, loaderOptions, content, implementation, u
|
|
|
178
184
|
|
|
179
185
|
|
|
180
186
|
options.importer = options.importer ? proxyCustomImporters(Array.isArray(options.importer) ? options.importer : [options.importer], loaderContext) : [];
|
|
181
|
-
options.includePaths = [].concat(process.cwd()).concat(
|
|
187
|
+
options.includePaths = [].concat(process.cwd()).concat( // We use `includePaths` in context for resolver, so it should be always absolute
|
|
188
|
+
(options.includePaths || []).map(includePath => _path.default.isAbsolute(includePath) ? includePath : _path.default.join(process.cwd(), includePath))).concat(process.env.SASS_PATH ? process.env.SASS_PATH.split(process.platform === "win32" ? ";" : ":") : []);
|
|
182
189
|
return options;
|
|
183
190
|
} // Examples:
|
|
184
191
|
// - ~package
|
|
@@ -226,7 +233,7 @@ url, forWebpackResolver = false, rootContext = false) {
|
|
|
226
233
|
// The `node-sass` package sends `@import` ending on `.css` to importer, it is bug, so we skip resolve
|
|
227
234
|
|
|
228
235
|
|
|
229
|
-
if (ext ===
|
|
236
|
+
if (ext === ".css") {
|
|
230
237
|
return [];
|
|
231
238
|
}
|
|
232
239
|
|
|
@@ -306,29 +313,29 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [],
|
|
|
306
313
|
}
|
|
307
314
|
}
|
|
308
315
|
|
|
309
|
-
const isDartSass = implementation.info.includes(
|
|
316
|
+
const isDartSass = implementation.info.includes("dart-sass");
|
|
310
317
|
const sassResolve = promiseResolve(resolverFactory({
|
|
311
318
|
alias: [],
|
|
312
319
|
aliasFields: [],
|
|
313
320
|
conditionNames: [],
|
|
314
321
|
descriptionFiles: [],
|
|
315
|
-
extensions: [
|
|
322
|
+
extensions: [".sass", ".scss", ".css"],
|
|
316
323
|
exportsFields: [],
|
|
317
324
|
mainFields: [],
|
|
318
|
-
mainFiles: [
|
|
325
|
+
mainFiles: ["_index", "index"],
|
|
319
326
|
modules: [],
|
|
320
327
|
restrictions: [/\.((sa|sc|c)ss)$/i]
|
|
321
328
|
}));
|
|
322
329
|
const webpackResolve = promiseResolve(resolverFactory({
|
|
323
|
-
conditionNames: [
|
|
324
|
-
mainFields: [
|
|
325
|
-
mainFiles: [
|
|
326
|
-
extensions: [
|
|
330
|
+
conditionNames: ["sass", "style"],
|
|
331
|
+
mainFields: ["sass", "style", "main", "..."],
|
|
332
|
+
mainFiles: ["_index", "index", "..."],
|
|
333
|
+
extensions: [".sass", ".scss", ".css"],
|
|
327
334
|
restrictions: [/\.((sa|sc|c)ss)$/i]
|
|
328
335
|
}));
|
|
329
336
|
return (context, request) => {
|
|
330
337
|
const originalRequest = request;
|
|
331
|
-
const isFileScheme = originalRequest.slice(0, 5).toLowerCase() ===
|
|
338
|
+
const isFileScheme = originalRequest.slice(0, 5).toLowerCase() === "file:";
|
|
332
339
|
|
|
333
340
|
if (isFileScheme) {
|
|
334
341
|
try {
|
|
@@ -346,7 +353,7 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [],
|
|
|
346
353
|
// Absolute paths should be resolved:
|
|
347
354
|
// - Server-relative URLs - `<context>/path/to/file.ext` (where `<context>` is root context)
|
|
348
355
|
// - Absolute path - `/full/path/to/file.ext` or `C:\\full\path\to\file.ext`
|
|
349
|
-
!isFileScheme && !originalRequest.startsWith(
|
|
356
|
+
!isFileScheme && !originalRequest.startsWith("/") && !IS_NATIVE_WIN32_PATH.test(originalRequest);
|
|
350
357
|
|
|
351
358
|
if (includePaths.length > 0 && needEmulateSassResolver) {
|
|
352
359
|
// The order of import precedence is as follows:
|
|
@@ -369,11 +376,13 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [],
|
|
|
369
376
|
}
|
|
370
377
|
|
|
371
378
|
resolutionMap = resolutionMap.concat( // eslint-disable-next-line no-shadow
|
|
372
|
-
includePaths.map(context =>
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
379
|
+
includePaths.map(context => {
|
|
380
|
+
return {
|
|
381
|
+
resolve: sassResolve,
|
|
382
|
+
context,
|
|
383
|
+
possibleRequests: sassPossibleRequests
|
|
384
|
+
};
|
|
385
|
+
}));
|
|
377
386
|
}
|
|
378
387
|
|
|
379
388
|
const webpackPossibleRequests = getPossibleRequests(request, true, rootContext);
|
|
@@ -398,7 +407,7 @@ function getWebpackImporter(loaderContext, implementation, includePaths) {
|
|
|
398
407
|
loaderContext.addDependency(_path.default.normalize(result)); // By removing the CSS file extension, we trigger node-sass to include the CSS file instead of just linking it.
|
|
399
408
|
|
|
400
409
|
done({
|
|
401
|
-
file: result.replace(matchCss,
|
|
410
|
+
file: result.replace(matchCss, "")
|
|
402
411
|
});
|
|
403
412
|
}) // Catch all resolving errors, return the original file and pass responsibility back to other custom importers
|
|
404
413
|
.catch(() => {
|
|
@@ -418,7 +427,7 @@ let nodeSassJobQueue = null;
|
|
|
418
427
|
*/
|
|
419
428
|
|
|
420
429
|
function getRenderFunctionFromSassImplementation(implementation) {
|
|
421
|
-
const isDartSass = implementation.info.includes(
|
|
430
|
+
const isDartSass = implementation.info.includes("dart-sass");
|
|
422
431
|
|
|
423
432
|
if (isDartSass) {
|
|
424
433
|
return implementation.render.bind(implementation);
|
|
@@ -438,19 +447,19 @@ function getRenderFunctionFromSassImplementation(implementation) {
|
|
|
438
447
|
const ABSOLUTE_SCHEME = /^[A-Za-z0-9+\-.]+:/;
|
|
439
448
|
|
|
440
449
|
function getURLType(source) {
|
|
441
|
-
if (source[0] ===
|
|
442
|
-
if (source[1] ===
|
|
443
|
-
return
|
|
450
|
+
if (source[0] === "/") {
|
|
451
|
+
if (source[1] === "/") {
|
|
452
|
+
return "scheme-relative";
|
|
444
453
|
}
|
|
445
454
|
|
|
446
|
-
return
|
|
455
|
+
return "path-absolute";
|
|
447
456
|
}
|
|
448
457
|
|
|
449
458
|
if (IS_NATIVE_WIN32_PATH.test(source)) {
|
|
450
|
-
return
|
|
459
|
+
return "path-absolute";
|
|
451
460
|
}
|
|
452
461
|
|
|
453
|
-
return ABSOLUTE_SCHEME.test(source) ?
|
|
462
|
+
return ABSOLUTE_SCHEME.test(source) ? "absolute" : "path-relative";
|
|
454
463
|
}
|
|
455
464
|
|
|
456
465
|
function normalizeSourceMap(map, rootContext) {
|
|
@@ -460,7 +469,7 @@ function normalizeSourceMap(map, rootContext) {
|
|
|
460
469
|
|
|
461
470
|
delete newMap.file; // eslint-disable-next-line no-param-reassign
|
|
462
471
|
|
|
463
|
-
newMap.sourceRoot =
|
|
472
|
+
newMap.sourceRoot = ""; // node-sass returns POSIX paths, that's why we need to transform them back to native paths.
|
|
464
473
|
// This fixes an error on windows where the source-map module cannot resolve the source maps.
|
|
465
474
|
// @see https://github.com/webpack-contrib/sass-loader/issues/366#issuecomment-279460722
|
|
466
475
|
// eslint-disable-next-line no-param-reassign
|
|
@@ -468,7 +477,7 @@ function normalizeSourceMap(map, rootContext) {
|
|
|
468
477
|
newMap.sources = newMap.sources.map(source => {
|
|
469
478
|
const sourceType = getURLType(source); // Do no touch `scheme-relative`, `path-absolute` and `absolute` types
|
|
470
479
|
|
|
471
|
-
if (sourceType ===
|
|
480
|
+
if (sourceType === "path-relative") {
|
|
472
481
|
return _path.default.resolve(rootContext, _path.default.normalize(source));
|
|
473
482
|
}
|
|
474
483
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sass-loader",
|
|
3
|
-
"version": "10.0
|
|
3
|
+
"version": "10.2.0",
|
|
4
4
|
"description": "Sass loader for webpack",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": "webpack-contrib/sass-loader",
|
|
@@ -39,10 +39,10 @@
|
|
|
39
39
|
"dist"
|
|
40
40
|
],
|
|
41
41
|
"peerDependencies": {
|
|
42
|
-
"
|
|
43
|
-
"node-sass": "^4.0.0",
|
|
42
|
+
"fibers": ">= 3.1.0",
|
|
43
|
+
"node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0",
|
|
44
44
|
"sass": "^1.3.0",
|
|
45
|
-
"
|
|
45
|
+
"webpack": "^4.36.0 || ^5.0.0"
|
|
46
46
|
},
|
|
47
47
|
"peerDependenciesMeta": {
|
|
48
48
|
"node-sass": {
|
|
@@ -70,32 +70,32 @@
|
|
|
70
70
|
"@commitlint/config-conventional": "^11.0.0",
|
|
71
71
|
"@webpack-contrib/defaults": "^6.3.0",
|
|
72
72
|
"@webpack-contrib/eslint-config-webpack": "^3.0.0",
|
|
73
|
-
"babel-jest": "^26.6.
|
|
73
|
+
"babel-jest": "^26.6.3",
|
|
74
74
|
"bootstrap": "^4.5.3",
|
|
75
75
|
"bootstrap-sass": "^3.4.1",
|
|
76
76
|
"cross-env": "^7.0.2",
|
|
77
|
-
"css-loader": "^5.0.
|
|
77
|
+
"css-loader": "^5.0.1",
|
|
78
78
|
"del": "^6.0.0",
|
|
79
79
|
"del-cli": "^3.0.1",
|
|
80
|
-
"enhanced-resolve": "^5.
|
|
81
|
-
"eslint": "^7.
|
|
82
|
-
"eslint-config-prettier": "^
|
|
80
|
+
"enhanced-resolve": "^5.5.0",
|
|
81
|
+
"eslint": "^7.13.0",
|
|
82
|
+
"eslint-config-prettier": "^7.1.0",
|
|
83
83
|
"eslint-plugin-import": "^2.22.1",
|
|
84
84
|
"fibers": "^5.0.0",
|
|
85
|
-
"file-loader": "^6.
|
|
85
|
+
"file-loader": "^6.2.0",
|
|
86
86
|
"foundation-sites": "^6.6.3",
|
|
87
87
|
"husky": "^4.3.0",
|
|
88
|
-
"jest": "^26.6.
|
|
89
|
-
"lint-staged": "^10.
|
|
90
|
-
"material-components-web": "^
|
|
88
|
+
"jest": "^26.6.3",
|
|
89
|
+
"lint-staged": "^10.5.1",
|
|
90
|
+
"material-components-web": "^8.0.0",
|
|
91
91
|
"memfs": "^3.2.0",
|
|
92
|
-
"node-sass": "^
|
|
92
|
+
"node-sass": "^5.0.0",
|
|
93
93
|
"npm-run-all": "^4.1.5",
|
|
94
94
|
"prettier": "^2.1.2",
|
|
95
|
-
"sass": "^1.
|
|
95
|
+
"sass": "^1.29.0",
|
|
96
96
|
"standard-version": "^9.0.0",
|
|
97
97
|
"style-loader": "^2.0.0",
|
|
98
|
-
"webpack": "^5.2
|
|
98
|
+
"webpack": "^5.12.2"
|
|
99
99
|
},
|
|
100
100
|
"keywords": [
|
|
101
101
|
"sass",
|