sass-loader 10.0.2 → 10.1.0

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 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.
 
+## [10.1.0](https://github.com/webpack-contrib/sass-loader/compare/v10.0.5...v10.1.0) (2020-11-11)
+
+
+### Features
+
+* 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))
+
+### [10.0.5](https://github.com/webpack-contrib/sass-loader/compare/v10.0.4...v10.0.5) (2020-11-02)
+
+
+### Bug Fixes
+
+* 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))
+
+### [10.0.4](https://github.com/webpack-contrib/sass-loader/compare/v10.0.3...v10.0.4) (2020-10-22)
+
+
+### Bug Fixes
+
+* compatibility with the filesystem cache ([#896](https://github.com/webpack-contrib/sass-loader/issues/896)) ([e31f9b6](https://github.com/webpack-contrib/sass-loader/commit/e31f9b682f62e957fd2075582c3cf6cf0daf6b52))
+
+### [10.0.3](https://github.com/webpack-contrib/sass-loader/compare/v10.0.2...v10.0.3) (2020-10-09)
+
+### Chore
+
+* update `schema-utils`
+
 ### [10.0.2](https://github.com/webpack-contrib/sass-loader/compare/v10.0.1...v10.0.2) (2020-09-03)
 
 

package/README.md

@@ -42,7 +42,7 @@ Then add the loader to your Webpack configuration. For example:
 **app.js**
 
 ```js
-import './style.scss';
+import "./style.scss";
 ```
 
 **style.scss**
@@ -65,11 +65,11 @@ module.exports = {
         test: /\.s[ac]ss$/i,
         use: [
           // Creates `style` nodes from JS strings
-          'style-loader',
+          "style-loader",
           // Translates CSS into CommonJS
-          'css-loader',
+          "css-loader",
           // Compiles Sass to CSS
-          'sass-loader',
+          "sass-loader",
         ],
       },
     ],
@@ -86,7 +86,7 @@ Webpack provides an [advanced mechanism to resolve files](https://webpack.js.org
 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:
 
 ```scss
-@import '~bootstrap';
+@import "~bootstrap";
 ```
 
 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:
 {
   "devDependencies": {
     "sass-loader": "^7.2.0",
-    "node-sass": "^4.0.0"
+    "node-sass": "^5.0.0"
   }
 }
 ```
@@ -167,13 +167,13 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               // Prefer `dart-sass`
-              implementation: require('sass'),
+              implementation: require("sass"),
             },
           },
         ],
@@ -211,12 +211,12 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
-              implementation: require('sass'),
+              implementation: require("sass"),
               sassOptions: {
                 fiber: false,
               },
@@ -240,14 +240,14 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
-              implementation: require('sass'),
+              implementation: require("sass"),
               sassOptions: {
-                fiber: require('fibers'),
+                fiber: require("fibers"),
               },
             },
           },
@@ -293,14 +293,14 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sassOptions: {
                 indentWidth: 4,
-                includePaths: ['absolute/path/a', 'absolute/path/b'],
+                includePaths: ["absolute/path/a", "absolute/path/b"],
               },
             },
           },
@@ -322,24 +322,24 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sassOptions: (loaderContext) => {
                 // More information about available properties https://webpack.js.org/api/loaders/
                 const { resourcePath, rootContext } = loaderContext;
                 const relativePath = path.relative(rootContext, resourcePath);
 
-                if (relativePath === 'styles/foo.scss') {
+                if (relativePath === "styles/foo.scss") {
                   return {
-                    includePaths: ['absolute/path/c', 'absolute/path/d'],
+                    includePaths: ["absolute/path/c", "absolute/path/d"],
                   };
                 }
 
                 return {
-                  includePaths: ['absolute/path/a', 'absolute/path/b'],
+                  includePaths: ["absolute/path/a", "absolute/path/b"],
                 };
               },
             },
@@ -372,15 +372,15 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
+          "style-loader",
           {
-            loader: 'css-loader',
+            loader: "css-loader",
             options: {
               sourceMap: true,
             },
           },
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sourceMap: true,
             },
@@ -405,14 +405,14 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sourceMap: true,
               sassOptions: {
-                outputStyle: 'compressed',
+                outputStyle: "compressed",
               },
             },
           },
@@ -442,12 +442,12 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
-              additionalData: '$env: ' + process.env.NODE_ENV + ';',
+              additionalData: "$env: " + process.env.NODE_ENV + ";",
             },
           },
         ],
@@ -459,6 +459,8 @@ module.exports = {
 
 #### `Function`
 
+##### Sync
+
 ```js
 module.exports = {
   module: {
@@ -466,21 +468,55 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               additionalData: (content, loaderContext) => {
                 // More information about available properties https://webpack.js.org/api/loaders/
                 const { resourcePath, rootContext } = loaderContext;
                 const relativePath = path.relative(rootContext, resourcePath);
 
-                if (relativePath === 'styles/foo.scss') {
-                  return '$value: 100px;' + content;
+                if (relativePath === "styles/foo.scss") {
+                  return "$value: 100px;" + content;
+                }
+
+                return "$value: 200px;" + content;
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
+##### Async
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          "style-loader",
+          "css-loader",
+          {
+            loader: "sass-loader",
+            options: {
+              additionalData: async (content, loaderContext) => {
+                // More information about available properties https://webpack.js.org/api/loaders/
+                const { resourcePath, rootContext } = loaderContext;
+                const relativePath = path.relative(rootContext, resourcePath);
+
+                if (relativePath === "styles/foo.scss") {
+                  return "$value: 100px;" + content;
                 }
 
-                return '$value: 200px;' + content;
+                return "$value: 200px;" + content;
               },
             },
           },
@@ -510,10 +546,10 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               webpackImporter: false,
             },
@@ -539,7 +575,7 @@ There are two possibilities to extract a style sheet from the bundle:
 **webpack.config.js**
 
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
   module: {
@@ -548,11 +584,11 @@ module.exports = {
         test: /\.s[ac]ss$/i,
         use: [
           // fallback to style-loader in development
-          process.env.NODE_ENV !== 'production'
-            ? 'style-loader'
+          process.env.NODE_ENV !== "production"
+            ? "style-loader"
             : MiniCssExtractPlugin.loader,
-          'css-loader',
-          'sass-loader',
+          "css-loader",
+          "sass-loader",
         ],
       },
     ],
@@ -561,8 +597,8 @@ module.exports = {
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
       // both options are optional
-      filename: '[name].css',
-      chunkFilename: '[id].css',
+      filename: "[name].css",
+      chunkFilename: "[id].css",
     }),
   ],
 };
@@ -578,21 +614,21 @@ To enable CSS source maps, you'll need to pass the `sourceMap` option to the `sa
 
 ```javascript
 module.exports = {
-  devtool: 'source-map', // any "source-map"-like devtool is possible
+  devtool: "source-map", // any "source-map"-like devtool is possible
   module: {
     rules: [
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
+          "style-loader",
           {
-            loader: 'css-loader',
+            loader: "css-loader",
             options: {
               sourceMap: true,
             },
           },
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sourceMap: true,
             },

package/dist/SassError.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 class SassError extends Error {
   constructor(sassError) {
     super();
-    this.name = 'SassError';
+    this.name = "SassError";
     this.originalSassError = sassError;
     this.loc = {
       line: sassError.line,
@@ -18,7 +18,7 @@ class SassError extends Error {
     this.message = `${this.name}: ${this.originalSassError.message}`;
 
     if (this.originalSassError.formatted) {
-      this.message = `${this.name}: ${this.originalSassError.formatted.replace(/^Error: /, '')}`; // Instruct webpack to hide the JS stack from the console.
+      this.message = `${this.name}: ${this.originalSassError.formatted.replace(/^Error: /, "")}`; // Instruct webpack to hide the JS stack from the console.
       // Usually you're only interested in the SASS stack in this case.
 
       this.hideStack = true;

package/dist/cjs.js

@@ -1,5 +1,5 @@
 "use strict";
 
-const loader = require('./index');
+const loader = require("./index");
 
 module.exports = loader.default;

package/dist/index.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _path = _interopRequireDefault(require("path"));
 
-var _schemaUtils = _interopRequireDefault(require("schema-utils"));
+var _schemaUtils = require("schema-utils");
 
 var _loaderUtils = require("loader-utils");
 
@@ -25,16 +25,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @this {object}
  * @param {string} content
  */
-function loader(content) {
+async function loader(content) {
   const options = (0, _loaderUtils.getOptions)(this);
-  (0, _schemaUtils.default)(_options.default, options, {
-    name: 'Sass Loader',
-    baseDataPath: 'options'
+  (0, _schemaUtils.validate)(_options.default, options, {
+    name: "Sass Loader",
+    baseDataPath: "options"
   });
-  const implementation = (0, _utils.getSassImplementation)(options.implementation);
-  const useSourceMap = typeof options.sourceMap === 'boolean' ? options.sourceMap : this.sourceMap;
-  const sassOptions = (0, _utils.getSassOptions)(this, options, content, implementation, useSourceMap);
-  const shouldUseWebpackImporter = typeof options.webpackImporter === 'boolean' ? options.webpackImporter : true;
+  const callback = this.async();
+  const implementation = (0, _utils.getSassImplementation)(this, options.implementation);
+
+  if (!implementation) {
+    callback();
+    return;
+  }
+
+  const useSourceMap = typeof options.sourceMap === "boolean" ? options.sourceMap : this.sourceMap;
+  const sassOptions = await (0, _utils.getSassOptions)(this, options, content, implementation, useSourceMap);
+  const shouldUseWebpackImporter = typeof options.webpackImporter === "boolean" ? options.webpackImporter : true;
 
   if (shouldUseWebpackImporter) {
     const {
@@ -43,7 +50,6 @@ function loader(content) {
     sassOptions.importer.push((0, _utils.getWebpackImporter)(this, implementation, includePaths));
   }
 
-  const callback = this.async();
   const render = (0, _utils.getRenderFunctionFromSassImplementation)(implementation);
   render(sassOptions, (error, result) => {
     if (error) {

package/dist/utils.js

@@ -25,17 +25,17 @@ var _neoAsync = _interopRequireDefault(require("neo-async"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function getDefaultSassImplementation() {
-  let sassImplPkg = 'sass';
+  let sassImplPkg = "sass";
 
   try {
-    require.resolve('sass');
+    require.resolve("sass");
   } catch (error) {
     try {
-      require.resolve('node-sass');
+      require.resolve("node-sass");
 
-      sassImplPkg = 'node-sass';
+      sassImplPkg = "node-sass";
     } catch (ignoreError) {
-      sassImplPkg = 'sass';
+      sassImplPkg = "sass";
     }
   } // eslint-disable-next-line import/no-dynamic-require, global-require
 
@@ -49,12 +49,16 @@ function getDefaultSassImplementation() {
  */
 
 
-function getSassImplementation(implementation) {
+function getSassImplementation(loaderContext, implementation) {
   let resolvedImplementation = implementation;
 
   if (!resolvedImplementation) {
-    // eslint-disable-next-line no-param-reassign
-    resolvedImplementation = getDefaultSassImplementation();
+    try {
+      resolvedImplementation = getDefaultSassImplementation();
+    } catch (error) {
+      loaderContext.emitError(error);
+      return;
+    }
   }
 
   const {
@@ -62,36 +66,40 @@ function getSassImplementation(implementation) {
   } = resolvedImplementation;
 
   if (!info) {
-    throw new Error('Unknown Sass implementation.');
+    loaderContext.emitError(new Error("Unknown Sass implementation."));
+    return;
   }
 
-  const infoParts = info.split('\t');
+  const infoParts = info.split("\t");
 
   if (infoParts.length < 2) {
-    throw new Error(`Unknown Sass implementation "${info}".`);
+    loaderContext.emitError(new Error(`Unknown Sass implementation "${info}".`));
+    return;
   }
 
   const [implementationName, version] = infoParts;
 
-  if (implementationName === 'dart-sass') {
-    if (!_semver.default.satisfies(version, '^1.3.0')) {
-      throw new Error(`Dart Sass version ${version} is incompatible with ^1.3.0.`);
-    }
+  if (implementationName === "dart-sass") {
+    if (!_semver.default.satisfies(version, "^1.3.0")) {
+      loaderContext.emitError(new Error(`Dart Sass version ${version} is incompatible with ^1.3.0.`));
+    } // eslint-disable-next-line consistent-return
+
 
     return resolvedImplementation;
-  } else if (implementationName === 'node-sass') {
-    if (!_semver.default.satisfies(version, '^4.0.0')) {
-      throw new Error(`Node Sass version ${version} is incompatible with ^4.0.0.`);
-    }
+  } else if (implementationName === "node-sass") {
+    if (!_semver.default.satisfies(version, "^4.0.0 || ^5.0.0")) {
+      loaderContext.emitError(new Error(`Node Sass version ${version} is incompatible with ^4.0.0 || ^5.0.0.`));
+    } // eslint-disable-next-line consistent-return
+
 
     return resolvedImplementation;
   }
 
-  throw new Error(`Unknown Sass implementation "${implementationName}".`);
+  loaderContext.emitError(new Error(`Unknown Sass implementation "${implementationName}".`));
 }
 
 function isProductionLikeMode(loaderContext) {
-  return loaderContext.mode === 'production' || !loaderContext.mode;
+  return loaderContext.mode === "production" || !loaderContext.mode;
 }
 
 function proxyCustomImporters(importers, loaderContext) {
@@ -114,9 +122,9 @@ function proxyCustomImporters(importers, loaderContext) {
  */
 
 
-function getSassOptions(loaderContext, loaderOptions, content, implementation, useSourceMap) {
-  const options = (0, _full.klona)(loaderOptions.sassOptions ? typeof loaderOptions.sassOptions === 'function' ? loaderOptions.sassOptions(loaderContext) || {} : loaderOptions.sassOptions : {});
-  const isDartSass = implementation.info.includes('dart-sass');
+async function getSassOptions(loaderContext, loaderOptions, content, implementation, useSourceMap) {
+  const options = (0, _full.klona)(loaderOptions.sassOptions ? typeof loaderOptions.sassOptions === "function" ? loaderOptions.sassOptions(loaderContext) || {} : loaderOptions.sassOptions : {});
+  const isDartSass = implementation.info.includes("dart-sass");
 
   if (isDartSass) {
     const shouldTryToResolveFibers = !options.fiber && options.fiber !== false;
@@ -125,7 +133,7 @@ function getSassOptions(loaderContext, loaderOptions, content, implementation, u
       let fibers;
 
       try {
-        fibers = require.resolve('fibers');
+        fibers = require.resolve("fibers");
       } catch (_error) {// Nothing
       }
 
@@ -143,10 +151,10 @@ function getSassOptions(loaderContext, loaderOptions, content, implementation, u
   }
 
   options.file = loaderContext.resourcePath;
-  options.data = loaderOptions.additionalData ? typeof loaderOptions.additionalData === 'function' ? loaderOptions.additionalData(content, loaderContext) : `${loaderOptions.additionalData}\n${content}` : content; // opt.outputStyle
+  options.data = loaderOptions.additionalData ? typeof loaderOptions.additionalData === "function" ? await loaderOptions.additionalData(content, loaderContext) : `${loaderOptions.additionalData}\n${content}` : content; // opt.outputStyle
 
   if (!options.outputStyle && isProductionLikeMode(loaderContext)) {
-    options.outputStyle = 'compressed';
+    options.outputStyle = "compressed";
   }
 
   if (useSourceMap) {
@@ -157,7 +165,7 @@ function getSassOptions(loaderContext, loaderOptions, content, implementation, u
     // all paths in sourceMap.sources will be relative to that path.
     // Pretty complicated... :(
     options.sourceMap = true;
-    options.outFile = _path.default.join(loaderContext.rootContext, 'style.css.map');
+    options.outFile = _path.default.join(loaderContext.rootContext, "style.css.map");
     options.sourceMapContents = true;
     options.omitSourceMapUrl = true;
     options.sourceMapEmbed = false;
@@ -170,7 +178,7 @@ function getSassOptions(loaderContext, loaderOptions, content, implementation, u
   const ext = _path.default.extname(resourcePath); // If we are compiling sass and indentedSyntax isn't set, automatically set it.
 
 
-  if (ext && ext.toLowerCase() === '.sass' && typeof options.indentedSyntax === 'undefined') {
+  if (ext && ext.toLowerCase() === ".sass" && typeof options.indentedSyntax === "undefined") {
     options.indentedSyntax = true;
   } else {
     options.indentedSyntax = Boolean(options.indentedSyntax);
@@ -178,7 +186,7 @@ function getSassOptions(loaderContext, loaderOptions, content, implementation, u
 
 
   options.importer = options.importer ? proxyCustomImporters(Array.isArray(options.importer) ? options.importer : [options.importer], loaderContext) : [];
-  options.includePaths = [].concat(process.cwd()).concat(options.includePaths || []).concat(process.env.SASS_PATH ? process.env.SASS_PATH.split(process.platform === 'win32' ? ';' : ':') : []);
+  options.includePaths = [].concat(process.cwd()).concat(options.includePaths || []).concat(process.env.SASS_PATH ? process.env.SASS_PATH.split(process.platform === "win32" ? ";" : ":") : []);
   return options;
 } // Examples:
 // - ~package
@@ -226,7 +234,7 @@ url, forWebpackResolver = false, rootContext = false) {
   // The `node-sass` package sends `@import` ending on `.css` to importer, it is bug, so we skip resolve
 
 
-  if (ext === '.css') {
+  if (ext === ".css") {
     return [];
   }
 
@@ -278,11 +286,18 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [],
     }
 
     const [{
-      resolve,
-      context,
       possibleRequests
     }] = resolutionMap;
 
+    if (possibleRequests.length === 0) {
+      return Promise.reject();
+    }
+
+    const [{
+      resolve,
+      context
+    }] = resolutionMap;
+
     try {
       return await resolve(context, possibleRequests[0]);
     } catch (_ignoreError) {
@@ -299,29 +314,29 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [],
     }
   }
 
-  const isDartSass = implementation.info.includes('dart-sass');
+  const isDartSass = implementation.info.includes("dart-sass");
   const sassResolve = promiseResolve(resolverFactory({
     alias: [],
     aliasFields: [],
     conditionNames: [],
     descriptionFiles: [],
-    extensions: ['.sass', '.scss', '.css'],
+    extensions: [".sass", ".scss", ".css"],
     exportsFields: [],
     mainFields: [],
-    mainFiles: ['_index', 'index'],
+    mainFiles: ["_index", "index"],
     modules: [],
     restrictions: [/\.((sa|sc|c)ss)$/i]
   }));
   const webpackResolve = promiseResolve(resolverFactory({
-    conditionNames: ['sass', 'style'],
-    mainFields: ['sass', 'style', 'main', '...'],
-    mainFiles: ['_index', 'index', '...'],
-    extensions: ['.sass', '.scss', '.css'],
+    conditionNames: ["sass", "style"],
+    mainFields: ["sass", "style", "main", "..."],
+    mainFiles: ["_index", "index", "..."],
+    extensions: [".sass", ".scss", ".css"],
     restrictions: [/\.((sa|sc|c)ss)$/i]
   }));
   return (context, request) => {
     const originalRequest = request;
-    const isFileScheme = originalRequest.slice(0, 5).toLowerCase() === 'file:';
+    const isFileScheme = originalRequest.slice(0, 5).toLowerCase() === "file:";
 
     if (isFileScheme) {
       try {
@@ -339,7 +354,7 @@ function getWebpackResolver(resolverFactory, implementation, includePaths = [],
     // Absolute paths should be resolved:
     // - Server-relative URLs - `<context>/path/to/file.ext` (where `<context>` is root context)
     // - Absolute path - `/full/path/to/file.ext` or `C:\\full\path\to\file.ext`
-    !isFileScheme && !originalRequest.startsWith('/') && !IS_NATIVE_WIN32_PATH.test(originalRequest);
+    !isFileScheme && !originalRequest.startsWith("/") && !IS_NATIVE_WIN32_PATH.test(originalRequest);
 
     if (includePaths.length > 0 && needEmulateSassResolver) {
       // The order of import precedence is as follows:
@@ -391,7 +406,7 @@ function getWebpackImporter(loaderContext, implementation, includePaths) {
       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.
 
       done({
-        file: result.replace(matchCss, '')
+        file: result.replace(matchCss, "")
       });
     }) // Catch all resolving errors, return the original file and pass responsibility back to other custom importers
     .catch(() => {
@@ -411,7 +426,7 @@ let nodeSassJobQueue = null;
  */
 
 function getRenderFunctionFromSassImplementation(implementation) {
-  const isDartSass = implementation.info.includes('dart-sass');
+  const isDartSass = implementation.info.includes("dart-sass");
 
   if (isDartSass) {
     return implementation.render.bind(implementation);
@@ -431,19 +446,19 @@ function getRenderFunctionFromSassImplementation(implementation) {
 const ABSOLUTE_SCHEME = /^[A-Za-z0-9+\-.]+:/;
 
 function getURLType(source) {
-  if (source[0] === '/') {
-    if (source[1] === '/') {
-      return 'scheme-relative';
+  if (source[0] === "/") {
+    if (source[1] === "/") {
+      return "scheme-relative";
     }
 
-    return 'path-absolute';
+    return "path-absolute";
   }
 
   if (IS_NATIVE_WIN32_PATH.test(source)) {
-    return 'path-absolute';
+    return "path-absolute";
   }
 
-  return ABSOLUTE_SCHEME.test(source) ? 'absolute' : 'path-relative';
+  return ABSOLUTE_SCHEME.test(source) ? "absolute" : "path-relative";
 }
 
 function normalizeSourceMap(map, rootContext) {
@@ -453,7 +468,7 @@ function normalizeSourceMap(map, rootContext) {
 
   delete newMap.file; // eslint-disable-next-line no-param-reassign
 
-  newMap.sourceRoot = ''; // node-sass returns POSIX paths, that's why we need to transform them back to native paths.
+  newMap.sourceRoot = ""; // node-sass returns POSIX paths, that's why we need to transform them back to native paths.
   // This fixes an error on windows where the source-map module cannot resolve the source maps.
   // @see https://github.com/webpack-contrib/sass-loader/issues/366#issuecomment-279460722
   // eslint-disable-next-line no-param-reassign
@@ -461,7 +476,7 @@ function normalizeSourceMap(map, rootContext) {
   newMap.sources = newMap.sources.map(source => {
     const sourceType = getURLType(source); // Do no touch `scheme-relative`, `path-absolute` and `absolute` types
 
-    if (sourceType === 'path-relative') {
+    if (sourceType === "path-relative") {
       return _path.default.resolve(rootContext, _path.default.normalize(source));
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sass-loader",
-  "version": "10.0.2",
+  "version": "10.1.0",
   "description": "Sass loader for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/sass-loader",
@@ -40,7 +40,7 @@
   ],
   "peerDependencies": {
     "webpack": "^4.36.0 || ^5.0.0",
-    "node-sass": "^4.0.0",
+    "node-sass": "^4.0.0 || ^5.0.0",
     "sass": "^1.3.0",
     "fibers": ">= 3.1.0"
   },
@@ -56,46 +56,46 @@
     }
   },
   "dependencies": {
-    "klona": "^2.0.3",
+    "klona": "^2.0.4",
     "loader-utils": "^2.0.0",
     "neo-async": "^2.6.2",
-    "schema-utils": "^2.7.1",
+    "schema-utils": "^3.0.0",
     "semver": "^7.3.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.11.5",
-    "@babel/core": "^7.11.5",
-    "@babel/preset-env": "^7.11.5",
-    "@commitlint/cli": "^10.0.0",
-    "@commitlint/config-conventional": "^10.0.0",
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
+    "@commitlint/cli": "^11.0.0",
+    "@commitlint/config-conventional": "^11.0.0",
     "@webpack-contrib/defaults": "^6.3.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
-    "babel-jest": "^26.3.0",
-    "bootstrap": "^4.5.2",
+    "babel-jest": "^26.6.3",
+    "bootstrap": "^4.5.3",
     "bootstrap-sass": "^3.4.1",
     "cross-env": "^7.0.2",
-    "css-loader": "^4.2.2",
-    "del": "^5.1.0",
+    "css-loader": "^5.0.1",
+    "del": "^6.0.0",
     "del-cli": "^3.0.1",
-    "enhanced-resolve": "^4.3.0",
-    "eslint": "^7.8.1",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.21.2",
+    "enhanced-resolve": "^5.3.1",
+    "eslint": "^7.13.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-import": "^2.22.1",
     "fibers": "^5.0.0",
-    "file-loader": "^6.1.0",
+    "file-loader": "^6.2.0",
     "foundation-sites": "^6.6.3",
-    "husky": "^4.2.5",
-    "jest": "^26.4.2",
-    "lint-staged": "^10.3.0",
-    "material-components-web": "^7.0.0",
+    "husky": "^4.3.0",
+    "jest": "^26.6.3",
+    "lint-staged": "^10.5.1",
+    "material-components-web": "^8.0.0",
     "memfs": "^3.2.0",
-    "node-sass": "^4.14.1",
+    "node-sass": "^5.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.1.1",
-    "sass": "^1.26.10",
+    "prettier": "^2.1.2",
+    "sass": "^1.29.0",
     "standard-version": "^9.0.0",
-    "style-loader": "^1.2.1",
-    "webpack": "^4.44.1"
+    "style-loader": "^2.0.0",
+    "webpack": "^5.4.0"
   },
   "keywords": [
     "sass",