sass-loader 10.0.5 → 10.1.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 +7 -0
- package/README.md +95 -59
- package/dist/SassError.js +2 -2
- package/dist/cjs.js +1 -1
- package/dist/index.js +14 -8
- package/dist/utils.js +58 -50
- package/package.json +12 -12
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
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.1.0](https://github.com/webpack-contrib/sass-loader/compare/v10.0.5...v10.1.0) (2020-11-11)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* 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))
|
|
11
|
+
|
|
5
12
|
### [10.0.5](https://github.com/webpack-contrib/sass-loader/compare/v10.0.4...v10.0.5) (2020-11-02)
|
|
6
13
|
|
|
7
14
|
|
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.
|
|
@@ -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) {
|
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,36 +66,40 @@ 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")) {
|
|
91
|
+
loaderContext.emitError(new Error(`Node Sass version ${version} is incompatible with ^4.0.0 || ^5.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) {
|
|
@@ -114,9 +122,9 @@ function proxyCustomImporters(importers, loaderContext) {
|
|
|
114
122
|
*/
|
|
115
123
|
|
|
116
124
|
|
|
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(
|
|
125
|
+
async function getSassOptions(loaderContext, loaderOptions, content, implementation, useSourceMap) {
|
|
126
|
+
const options = (0, _full.klona)(loaderOptions.sassOptions ? typeof loaderOptions.sassOptions === "function" ? loaderOptions.sassOptions(loaderContext) || {} : loaderOptions.sassOptions : {});
|
|
127
|
+
const isDartSass = implementation.info.includes("dart-sass");
|
|
120
128
|
|
|
121
129
|
if (isDartSass) {
|
|
122
130
|
const shouldTryToResolveFibers = !options.fiber && options.fiber !== false;
|
|
@@ -125,7 +133,7 @@ function getSassOptions(loaderContext, loaderOptions, content, implementation, u
|
|
|
125
133
|
let fibers;
|
|
126
134
|
|
|
127
135
|
try {
|
|
128
|
-
fibers = require.resolve(
|
|
136
|
+
fibers = require.resolve("fibers");
|
|
129
137
|
} catch (_error) {// Nothing
|
|
130
138
|
}
|
|
131
139
|
|
|
@@ -143,10 +151,10 @@ function getSassOptions(loaderContext, loaderOptions, content, implementation, u
|
|
|
143
151
|
}
|
|
144
152
|
|
|
145
153
|
options.file = loaderContext.resourcePath;
|
|
146
|
-
options.data = loaderOptions.additionalData ? typeof loaderOptions.additionalData ===
|
|
154
|
+
options.data = loaderOptions.additionalData ? typeof loaderOptions.additionalData === "function" ? await loaderOptions.additionalData(content, loaderContext) : `${loaderOptions.additionalData}\n${content}` : content; // opt.outputStyle
|
|
147
155
|
|
|
148
156
|
if (!options.outputStyle && isProductionLikeMode(loaderContext)) {
|
|
149
|
-
options.outputStyle =
|
|
157
|
+
options.outputStyle = "compressed";
|
|
150
158
|
}
|
|
151
159
|
|
|
152
160
|
if (useSourceMap) {
|
|
@@ -157,7 +165,7 @@ function getSassOptions(loaderContext, loaderOptions, content, implementation, u
|
|
|
157
165
|
// all paths in sourceMap.sources will be relative to that path.
|
|
158
166
|
// Pretty complicated... :(
|
|
159
167
|
options.sourceMap = true;
|
|
160
|
-
options.outFile = _path.default.join(loaderContext.rootContext,
|
|
168
|
+
options.outFile = _path.default.join(loaderContext.rootContext, "style.css.map");
|
|
161
169
|
options.sourceMapContents = true;
|
|
162
170
|
options.omitSourceMapUrl = true;
|
|
163
171
|
options.sourceMapEmbed = false;
|
|
@@ -170,7 +178,7 @@ function getSassOptions(loaderContext, loaderOptions, content, implementation, u
|
|
|
170
178
|
const ext = _path.default.extname(resourcePath); // If we are compiling sass and indentedSyntax isn't set, automatically set it.
|
|
171
179
|
|
|
172
180
|
|
|
173
|
-
if (ext && ext.toLowerCase() ===
|
|
181
|
+
if (ext && ext.toLowerCase() === ".sass" && typeof options.indentedSyntax === "undefined") {
|
|
174
182
|
options.indentedSyntax = true;
|
|
175
183
|
} else {
|
|
176
184
|
options.indentedSyntax = Boolean(options.indentedSyntax);
|
|
@@ -178,7 +186,7 @@ function getSassOptions(loaderContext, loaderOptions, content, implementation, u
|
|
|
178
186
|
|
|
179
187
|
|
|
180
188
|
options.importer = options.importer ? proxyCustomImporters(Array.isArray(options.importer) ? options.importer : [options.importer], loaderContext) : [];
|
|
181
|
-
options.includePaths = [].concat(process.cwd()).concat(options.includePaths || []).concat(process.env.SASS_PATH ? process.env.SASS_PATH.split(process.platform ===
|
|
189
|
+
options.includePaths = [].concat(process.cwd()).concat(options.includePaths || []).concat(process.env.SASS_PATH ? process.env.SASS_PATH.split(process.platform === "win32" ? ";" : ":") : []);
|
|
182
190
|
return options;
|
|
183
191
|
} // Examples:
|
|
184
192
|
// - ~package
|
|
@@ -226,7 +234,7 @@ url, forWebpackResolver = false, rootContext = false) {
|
|
|
226
234
|
// The `node-sass` package sends `@import` ending on `.css` to importer, it is bug, so we skip resolve
|
|
227
235
|
|
|
228
236
|
|
|
229
|
-
if (ext ===
|
|
237
|
+
if (ext === ".css") {
|
|
230
238
|
return [];
|
|
231
239
|
}
|
|
232
240
|
|
|
@@ -306,29 +314,29 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [],
|
|
|
306
314
|
}
|
|
307
315
|
}
|
|
308
316
|
|
|
309
|
-
const isDartSass = implementation.info.includes(
|
|
317
|
+
const isDartSass = implementation.info.includes("dart-sass");
|
|
310
318
|
const sassResolve = promiseResolve(resolverFactory({
|
|
311
319
|
alias: [],
|
|
312
320
|
aliasFields: [],
|
|
313
321
|
conditionNames: [],
|
|
314
322
|
descriptionFiles: [],
|
|
315
|
-
extensions: [
|
|
323
|
+
extensions: [".sass", ".scss", ".css"],
|
|
316
324
|
exportsFields: [],
|
|
317
325
|
mainFields: [],
|
|
318
|
-
mainFiles: [
|
|
326
|
+
mainFiles: ["_index", "index"],
|
|
319
327
|
modules: [],
|
|
320
328
|
restrictions: [/\.((sa|sc|c)ss)$/i]
|
|
321
329
|
}));
|
|
322
330
|
const webpackResolve = promiseResolve(resolverFactory({
|
|
323
|
-
conditionNames: [
|
|
324
|
-
mainFields: [
|
|
325
|
-
mainFiles: [
|
|
326
|
-
extensions: [
|
|
331
|
+
conditionNames: ["sass", "style"],
|
|
332
|
+
mainFields: ["sass", "style", "main", "..."],
|
|
333
|
+
mainFiles: ["_index", "index", "..."],
|
|
334
|
+
extensions: [".sass", ".scss", ".css"],
|
|
327
335
|
restrictions: [/\.((sa|sc|c)ss)$/i]
|
|
328
336
|
}));
|
|
329
337
|
return (context, request) => {
|
|
330
338
|
const originalRequest = request;
|
|
331
|
-
const isFileScheme = originalRequest.slice(0, 5).toLowerCase() ===
|
|
339
|
+
const isFileScheme = originalRequest.slice(0, 5).toLowerCase() === "file:";
|
|
332
340
|
|
|
333
341
|
if (isFileScheme) {
|
|
334
342
|
try {
|
|
@@ -346,7 +354,7 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [],
|
|
|
346
354
|
// Absolute paths should be resolved:
|
|
347
355
|
// - Server-relative URLs - `<context>/path/to/file.ext` (where `<context>` is root context)
|
|
348
356
|
// - Absolute path - `/full/path/to/file.ext` or `C:\\full\path\to\file.ext`
|
|
349
|
-
!isFileScheme && !originalRequest.startsWith(
|
|
357
|
+
!isFileScheme && !originalRequest.startsWith("/") && !IS_NATIVE_WIN32_PATH.test(originalRequest);
|
|
350
358
|
|
|
351
359
|
if (includePaths.length > 0 && needEmulateSassResolver) {
|
|
352
360
|
// The order of import precedence is as follows:
|
|
@@ -398,7 +406,7 @@ function getWebpackImporter(loaderContext, implementation, includePaths) {
|
|
|
398
406
|
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
407
|
|
|
400
408
|
done({
|
|
401
|
-
file: result.replace(matchCss,
|
|
409
|
+
file: result.replace(matchCss, "")
|
|
402
410
|
});
|
|
403
411
|
}) // Catch all resolving errors, return the original file and pass responsibility back to other custom importers
|
|
404
412
|
.catch(() => {
|
|
@@ -418,7 +426,7 @@ let nodeSassJobQueue = null;
|
|
|
418
426
|
*/
|
|
419
427
|
|
|
420
428
|
function getRenderFunctionFromSassImplementation(implementation) {
|
|
421
|
-
const isDartSass = implementation.info.includes(
|
|
429
|
+
const isDartSass = implementation.info.includes("dart-sass");
|
|
422
430
|
|
|
423
431
|
if (isDartSass) {
|
|
424
432
|
return implementation.render.bind(implementation);
|
|
@@ -438,19 +446,19 @@ function getRenderFunctionFromSassImplementation(implementation) {
|
|
|
438
446
|
const ABSOLUTE_SCHEME = /^[A-Za-z0-9+\-.]+:/;
|
|
439
447
|
|
|
440
448
|
function getURLType(source) {
|
|
441
|
-
if (source[0] ===
|
|
442
|
-
if (source[1] ===
|
|
443
|
-
return
|
|
449
|
+
if (source[0] === "/") {
|
|
450
|
+
if (source[1] === "/") {
|
|
451
|
+
return "scheme-relative";
|
|
444
452
|
}
|
|
445
453
|
|
|
446
|
-
return
|
|
454
|
+
return "path-absolute";
|
|
447
455
|
}
|
|
448
456
|
|
|
449
457
|
if (IS_NATIVE_WIN32_PATH.test(source)) {
|
|
450
|
-
return
|
|
458
|
+
return "path-absolute";
|
|
451
459
|
}
|
|
452
460
|
|
|
453
|
-
return ABSOLUTE_SCHEME.test(source) ?
|
|
461
|
+
return ABSOLUTE_SCHEME.test(source) ? "absolute" : "path-relative";
|
|
454
462
|
}
|
|
455
463
|
|
|
456
464
|
function normalizeSourceMap(map, rootContext) {
|
|
@@ -460,7 +468,7 @@ function normalizeSourceMap(map, rootContext) {
|
|
|
460
468
|
|
|
461
469
|
delete newMap.file; // eslint-disable-next-line no-param-reassign
|
|
462
470
|
|
|
463
|
-
newMap.sourceRoot =
|
|
471
|
+
newMap.sourceRoot = ""; // node-sass returns POSIX paths, that's why we need to transform them back to native paths.
|
|
464
472
|
// This fixes an error on windows where the source-map module cannot resolve the source maps.
|
|
465
473
|
// @see https://github.com/webpack-contrib/sass-loader/issues/366#issuecomment-279460722
|
|
466
474
|
// eslint-disable-next-line no-param-reassign
|
|
@@ -468,7 +476,7 @@ function normalizeSourceMap(map, rootContext) {
|
|
|
468
476
|
newMap.sources = newMap.sources.map(source => {
|
|
469
477
|
const sourceType = getURLType(source); // Do no touch `scheme-relative`, `path-absolute` and `absolute` types
|
|
470
478
|
|
|
471
|
-
if (sourceType ===
|
|
479
|
+
if (sourceType === "path-relative") {
|
|
472
480
|
return _path.default.resolve(rootContext, _path.default.normalize(source));
|
|
473
481
|
}
|
|
474
482
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sass-loader",
|
|
3
|
-
"version": "10.0
|
|
3
|
+
"version": "10.1.0",
|
|
4
4
|
"description": "Sass loader for webpack",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": "webpack-contrib/sass-loader",
|
|
@@ -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.3.
|
|
81
|
-
"eslint": "^7.
|
|
82
|
-
"eslint-config-prettier": "^6.
|
|
80
|
+
"enhanced-resolve": "^5.3.1",
|
|
81
|
+
"eslint": "^7.13.0",
|
|
82
|
+
"eslint-config-prettier": "^6.15.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
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.
|
|
98
|
+
"webpack": "^5.4.0"
|
|
99
99
|
},
|
|
100
100
|
"keywords": [
|
|
101
101
|
"sass",
|