{"_id":"@amoo-miki/sass-loader","_rev":"3-ff98bf956ec6a1cb74860f7a107ee756","name":"@amoo-miki/sass-loader","dist-tags":{"latest":"10.4.1-node-sass-9.0.0-libsass-3.6.5-with-sass-embedded.rc1"},"versions":{"10.4.1-node-sass-9.0.0-libsass-3.6.5":{"name":"@amoo-miki/sass-loader","version":"10.4.1-node-sass-9.0.0-libsass-3.6.5","description":"Sass loader for webpack","license":"MIT","repository":{"type":"git","url":"git+https://github.com/webpack-contrib/sass-loader.git"},"authors":["J. Tangelder","AMoo-Miki"],"homepage":"https://github.com/AMoo-Miki/sass-loader","bugs":{"url":"https://github.com/AMoo-Miki/sass-loader/issues"},"funding":{"type":"opencollective","url":"https://opencollective.com/webpack"},"main":"dist/cjs.js","engines":{"node":">= 10.13.0"},"scripts":{"start":"npm run build -- -w","clean":"del-cli dist","prebuild":"npm run clean","build":"cross-env NODE_ENV=production babel src -d dist --copy-files","commitlint":"commitlint --from=master","security":"npm audit","lint:prettier":"prettier --list-different .","lint:js":"eslint --cache .","lint":"npm-run-all -l -p \"lint:**\"","test:only":"cross-env NODE_ENV=test jest","test:watch":"npm run test:only -- --watch","test:manual":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","test:coverage":"npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage","pretest":"npm run lint","test":"npm run test:coverage","prepare":"npm run build","release":"standard-version","defaults":"webpack-defaults"},"peerDependencies":{"fibers":">= 3.1.0","node-sass":"^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0","sass":"^1.3.0","webpack":"^4.36.0 || ^5.0.0"},"peerDependenciesMeta":{"node-sass":{"optional":true},"sass":{"optional":true},"fibers":{"optional":true}},"overrides":{"semver":"^7.5.4"},"dependencies":{"klona":"^2.0.4","loader-utils":"^2.0.0","neo-async":"^2.6.2","schema-utils":"^3.0.0","semver":"^7.5.4"},"devDependencies":{"@babel/cli":"^7.21.5","@babel/core":"^7.21.5","@babel/preset-env":"^7.21.5","@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":"^29.5.0","bootstrap":"^4.5.3","bootstrap-sass":"^3.4.1","cross-env":"^7.0.2","css-loader":"^5.2.7","del":"^6.1.1","del-cli":"^4.0.1","enhanced-resolve":"^5.15.0","eslint":"^7.13.0","eslint-config-prettier":"^7.1.0","eslint-plugin-import":"^2.22.1","fibers":"^5.0.3","file-loader":"^6.2.0","foundation-sites":"^6.7.5","husky":"^8.0.3","jest":"^29.5.0","lint-staged":"^13.2.3","material-components-web":"^8.0.0","memfs":"^3.6.0","node-sass":"npm:@amoo-miki/node-sass@9.0.0-libsass-3.6.5","npm-run-all":"^4.1.5","prettier":"^2.8.8","sass":"^1.64.2","standard-version":"^9.3.2","style-loader":"^3.3.3","webpack":"^5.12.2"},"keywords":["sass","libsass","webpack","loader"],"gitHead":"7e232bff664cc619faf6767c88a5f9b9d48c0cab","_id":"@amoo-miki/sass-loader@10.4.1-node-sass-9.0.0-libsass-3.6.5","_nodeVersion":"18.16.1","_npmVersion":"9.5.1","dist":{"integrity":"sha512-jZhlf9wVKR3xk8rmOHjBbC0Wur7ly3iDNv+usZ7ioPE/SBUAeoUu89VQKswxD6bhjcvlnFf8AmkeqztCn6oNMg==","shasum":"d1cb70a9a708d29bbe94522c1bd7e945406f3a14","tarball":"https://registry.npmjs.org/@amoo-miki/sass-loader/-/sass-loader-10.4.1-node-sass-9.0.0-libsass-3.6.5.tgz","fileCount":8,"unpackedSize":46449,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvNr27RcWvL77b8QeM11CiaKPO5IZoNBk3/sJNf429SAIgIIufxPORe64MUjcsoyWUPCPn51zzsARt83V+DWnYhrY="}]},"_npmUser":{"name":"amoo_miki","email":"amoo_miki@yahoo.com"},"directories":{},"maintainers":[{"name":"amoo_miki","email":"amoo_miki@yahoo.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sass-loader_10.4.1-node-sass-9.0.0-libsass-3.6.5_1690934323086_0.11169388300196248"},"_hasShrinkwrap":false},"10.4.1-node-sass-9.0.0-libsass-3.6.5-with-sass-embedded.rc1":{"name":"@amoo-miki/sass-loader","version":"10.4.1-node-sass-9.0.0-libsass-3.6.5-with-sass-embedded.rc1","description":"Sass loader for webpack","license":"MIT","repository":{"type":"git","url":"git+https://github.com/webpack-contrib/sass-loader.git"},"authors":["J. Tangelder","AMoo-Miki"],"homepage":"https://github.com/AMoo-Miki/sass-loader","bugs":{"url":"https://github.com/AMoo-Miki/sass-loader/issues"},"funding":{"type":"opencollective","url":"https://opencollective.com/webpack"},"main":"dist/cjs.js","engines":{"node":">= 10.13.0"},"scripts":{"start":"npm run build -- -w","clean":"del-cli dist","prebuild":"npm run clean","build":"cross-env NODE_ENV=production babel src -d dist --copy-files","commitlint":"commitlint --from=master","security":"npm audit","lint:prettier":"prettier --list-different .","lint:js":"eslint --cache .","lint":"npm-run-all -l -p \"lint:**\"","test:only":"cross-env NODE_ENV=test jest","test:watch":"npm run test:only -- --watch","test:manual":"npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js","test:coverage":"npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage","pretest":"npm run lint","test":"npm run test:coverage","prepare":"npm run build","release":"standard-version","defaults":"webpack-defaults"},"peerDependencies":{"fibers":">= 3.1.0","node-sass":"^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0","sass":"^1.3.0","sass-embedded":"^1.66.1","webpack":"^4.36.0 || ^5.0.0"},"peerDependenciesMeta":{"node-sass":{"optional":true},"sass":{"optional":true},"sass-embedded":{"optional":true},"fibers":{"optional":true}},"overrides":{"semver":"^7.5.4"},"dependencies":{"klona":"^2.0.4","loader-utils":"^2.0.0","neo-async":"^2.6.2","schema-utils":"^3.0.0","semver":"^7.5.4"},"devDependencies":{"@babel/cli":"^7.21.5","@babel/core":"^7.21.5","@babel/preset-env":"^7.21.5","@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":"^29.5.0","bootstrap":"^4.5.3","bootstrap-sass":"^3.4.1","cross-env":"^7.0.2","css-loader":"^5.2.7","del":"^6.1.1","del-cli":"^4.0.1","enhanced-resolve":"^5.15.0","eslint":"^7.13.0","eslint-config-prettier":"^7.1.0","eslint-plugin-import":"^2.22.1","fibers":"^5.0.3","file-loader":"^6.2.0","foundation-sites":"^6.7.5","husky":"^8.0.3","jest":"^29.5.0","lint-staged":"^13.2.3","material-components-web":"^8.0.0","memfs":"^3.6.0","node-sass":"npm:@amoo-miki/node-sass@9.0.0-libsass-3.6.5","npm-run-all":"^4.1.5","prettier":"^2.8.8","sass":"^1.64.2","sass-embedded":"^1.66.1","standard-version":"^9.3.2","style-loader":"^3.3.3","webpack":"^5.12.2"},"keywords":["sass","libsass","webpack","loader"],"gitHead":"1074f1fbdbad4437d8a9d3f670d9a9a2416ed519","_id":"@amoo-miki/sass-loader@10.4.1-node-sass-9.0.0-libsass-3.6.5-with-sass-embedded.rc1","_nodeVersion":"16.20.1","_npmVersion":"8.19.4","dist":{"integrity":"sha512-ymdhgRVtB4PFnoOEgk/TMr75+STk3rKGFCm8Ju1uTuPNGkA/forR6Xv5GvBjNnMD3xdZyDpBszCeYfuP9Mfdzw==","shasum":"53d6f5ecb9785f957ee5a96780f98a97cb19e9c5","tarball":"https://registry.npmjs.org/@amoo-miki/sass-loader/-/sass-loader-10.4.1-node-sass-9.0.0-libsass-3.6.5-with-sass-embedded.rc1.tgz","fileCount":8,"unpackedSize":47178,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCf9WukXZAVwstoYWICxg1q0ZQ2phZuYS9n/KBR6/xzNgIhALEY4mCLOgfPTMCywF/Jh3qcFlLG1pFRx+uSWU0TRNRb"}]},"_npmUser":{"name":"amoo_miki","email":"amoo_miki@yahoo.com"},"directories":{},"maintainers":[{"name":"amoo_miki","email":"amoo_miki@yahoo.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sass-loader_10.4.1-node-sass-9.0.0-libsass-3.6.5-with-sass-embedded.rc1_1697656799148_0.05854646121183826"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-01T23:48:26.474Z","10.4.1":"2023-08-01T23:48:26.725Z","modified":"2023-10-18T19:19:59.662Z","10.4.1-node-sass-9.0.0-libsass-3.6.5":"2023-08-01T23:58:43.258Z","10.4.1-node-sass-9.0.0-libsass-3.6.5-with-sass-embedded.rc1":"2023-10-18T19:19:59.452Z"},"maintainers":[{"name":"amoo_miki","email":"amoo_miki@yahoo.com"}],"description":"Sass loader for webpack","homepage":"https://github.com/AMoo-Miki/sass-loader","keywords":["sass","libsass","webpack","loader"],"repository":{"type":"git","url":"git+https://github.com/webpack-contrib/sass-loader.git"},"bugs":{"url":"https://github.com/AMoo-Miki/sass-loader/issues"},"license":"MIT","readme":"# @amoo-miki/sass-loader\n\nLoads a Sass/SCSS file and compiles it to CSS.\n\nThis is a fork of [`sass-loader@10.4.1`](https://github.com/webpack-contrib/sass-loader/releases/tag/v10.4.1) with support for `node-sass@9` and mainly created to be used with [`@amoo-miki/node-sass@9.0.0-libsass-3.6.5`](https://www.npmjs.com/package/@amoo-miki/node-sass).\n\nThe easiest way to use this is by updating the `package.json` with:\n```json\n\"devDependencies\": {\n  \"node-sass\": \"npm:@amoo-miki/node-sass@9.0.0-libsass-3.6.5\",\n  \"sass-loader\": \"npm:@amoo-miki/sass-loader@10.4.1-node-sass-9.0.0-libsass-3.6.5\"\n}\n```\n\n\n## Getting Started\n\nTo begin, you'll need to install `sass-loader`:\n\n```console\nnpm install sass-loader sass webpack --save-dev\n```\n\n`sass-loader` requires you to install either [Dart Sass](https://github.com/sass/dart-sass) or [Node Sass](https://github.com/sass/node-sass) on your own (more documentation can be found below).\n\nThis allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.\n\n> ℹ️ We recommend using [Dart Sass](https://github.com/sass/dart-sass).\n\n> ⚠ [Node Sass](https://github.com/sass/node-sass) does not work with [Yarn PnP](https://classic.yarnpkg.com/en/docs/pnp/) feature.\n\nChain the `sass-loader` with the [css-loader](https://github.com/webpack-contrib/css-loader) and the [style-loader](https://github.com/webpack-contrib/style-loader) to immediately apply all styles to the DOM or the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to extract it into a separate file.\n\nThen add the loader to your Webpack configuration. For example:\n\n**app.js**\n\n```js\nimport \"./style.scss\";\n```\n\n**style.scss**\n\n```scss\n$body-color: red;\n\nbody {\n  color: $body-color;\n}\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          // Creates `style` nodes from JS strings\n          \"style-loader\",\n          // Translates CSS into CommonJS\n          \"css-loader\",\n          // Compiles Sass to CSS\n          \"sass-loader\",\n        ],\n      },\n    ],\n  },\n};\n```\n\nFinally run `webpack` via your preferred method.\n\n### Resolving `import` at-rules\n\nWebpack provides an [advanced mechanism to resolve files](https://webpack.js.org/concepts/module-resolution/).\n\nThe `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:\n\n```scss\n@import \"~bootstrap\";\n```\n\nIt's important to only prepend it with `~`, because `~/` resolves to the home directory.\nWebpack needs to distinguish between `bootstrap` and `~bootstrap` because CSS and Sass files have no special syntax for importing relative files.\nWriting `@import \"style.scss\"` is the same as `@import \"./style.scss\";`\n\n### Problems with `url(...)`\n\nSince Sass implementations don't provide [url rewriting](https://github.com/sass/libsass/issues/532), all linked assets must be relative to the output.\n\n- If you pass the generated CSS on to the `css-loader`, all urls must be relative to the entry-file (e.g. `main.scss`).\n- If you're just generating CSS without passing it to the `css-loader`, it must be relative to your web root.\n\nYou will be disrupted by this first issue. It is natural to expect relative references to be resolved against the `.sass`/`.scss` file in which they are specified (like in regular `.css` files).\n\nThankfully there are a two solutions to this problem:\n\n- Add the missing url rewriting using the [resolve-url-loader](https://github.com/bholloway/resolve-url-loader). Place it before `sass-loader` in the loader chain.\n- Library authors usually provide a variable to modify the asset path. [bootstrap-sass](https://github.com/twbs/bootstrap-sass) for example has an `$icon-font-path`.\n\n## Options\n\n|                   Name                    |         Type         |                 Default                 | Description                                                       |\n| :---------------------------------------: | :------------------: | :-------------------------------------: | :---------------------------------------------------------------- |\n|  **[`implementation`](#implementation)**  |      `{Object}`      |                 `sass`                  | Setup Sass implementation to use.                                 |\n|     **[`sassOptions`](#sassoptions)**     | `{Object\\|Function}` | defaults values for Sass implementation | Options for Sass.                                                 |\n|       **[`sourceMap`](#sourcemap)**       |     `{Boolean}`      |           `compiler.devtool`            | Enables/Disables generation of source maps.                       |\n|  **[`additionalData`](#additionaldata)**  | `{String\\|Function}` |               `undefined`               | Prepends/Appends `Sass`/`SCSS` code before the actual entry file. |\n| **[`webpackImporter`](#webpackimporter)** |     `{Boolean}`      |                 `true`                  | Enables/Disables the default Webpack importer.                    |\n\n### `implementation`\n\nType: `Object`\nDefault: `sass`\n\nThe special `implementation` option determines which implementation of Sass to use.\n\nBy default the loader resolve the implementation based on your dependencies.\nJust add required implementation to `package.json` (`sass` or `node-sass` package) and install dependencies.\n\nExample where the `sass-loader` loader uses the `sass` (`dart-sass`) implementation:\n\n**package.json**\n\n```json\n{\n  \"devDependencies\": {\n    \"sass-loader\": \"^7.2.0\",\n    \"sass\": \"^1.22.10\"\n  }\n}\n```\n\nExample where the `sass-loader` loader uses the `node-sass` implementation:\n\n**package.json**\n\n```json\n{\n  \"devDependencies\": {\n    \"sass-loader\": \"^7.2.0\",\n    \"node-sass\": \"^5.0.0\"\n  }\n}\n```\n\nBeware the situation when `node-sass` and `sass` were installed! By default the `sass-loader` prefers `sass`.\nIn order to avoid this situation you can use the `implementation` option.\n\nThe `implementation` options either accepts `sass` (`Dart Sass`) or `node-sass` as a module.\n\nFor example, to use Dart Sass, you'd pass:\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          \"style-loader\",\n          \"css-loader\",\n          {\n            loader: \"sass-loader\",\n            options: {\n              // Prefer `dart-sass`\n              implementation: require(\"sass\"),\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\nNote that when using `sass` (`Dart Sass`), **synchronous compilation is twice as fast as asynchronous compilation** by default, due to the overhead of asynchronous callbacks.\nTo avoid this overhead, you can use the [fibers](https://www.npmjs.com/package/fibers) package to call asynchronous importers from the synchronous code path.\n\nWe automatically inject the [`fibers`](https://github.com/laverdet/node-fibers) package (setup `sassOptions.fiber`) for `Node.js` less v16.0.0 if is possible (i.e. you need install the [`fibers`](https://github.com/laverdet/node-fibers) package).\n\n> Fibers is not compatible with `Node.js` v16.0.0 or later ([see introduction to readme](https://github.com/laverdet/node-fibers)).\n\n**package.json**\n\n```json\n{\n  \"devDependencies\": {\n    \"sass-loader\": \"^7.2.0\",\n    \"sass\": \"^1.22.10\",\n    \"fibers\": \"^4.0.1\"\n  }\n}\n```\n\nYou can disable automatically injecting the [`fibers`](https://github.com/laverdet/node-fibers) package by passing a `false` value for the `sassOptions.fiber` option.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          \"style-loader\",\n          \"css-loader\",\n          {\n            loader: \"sass-loader\",\n            options: {\n              implementation: require(\"sass\"),\n              sassOptions: {\n                fiber: false,\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\nYou can also pass the `fiber` value using this code:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          \"style-loader\",\n          \"css-loader\",\n          {\n            loader: \"sass-loader\",\n            options: {\n              implementation: require(\"sass\"),\n              sassOptions: {\n                fiber: require(\"fibers\"),\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `sassOptions`\n\nType: `Object|Function`\nDefault: defaults values for Sass implementation\n\nOptions for [Dart Sass](http://sass-lang.com/dart-sass) or [Node Sass](https://github.com/sass/node-sass) implementation.\n\n> ℹ️ The `indentedSyntax` option has `true` value for the `sass` extension.\n\n> ℹ️ Options such as `data` and `file` are unavailable and will be ignored.\n\n> ℹ We recommend not to set the `outFile`, `sourceMapContents`, `sourceMapEmbed`, `sourceMapRoot` options because `sass-loader` automatically sets these options when the `sourceMap` option is `true`.\n\n> ℹ️ Access to the [loader context](https://webpack.js.org/api/loaders/#the-loader-context) inside the custom importer can be done using the `this.webpackLoaderContext` property.\n\nThere is a slight difference between the `sass` (`dart-sass`) and `node-sass` options.\n\nPlease consult documentation before using them:\n\n- [Dart Sass documentation](https://github.com/sass/dart-sass#javascript-api) for all available `sass` options.\n- [Node Sass documentation](https://github.com/sass/node-sass/#options) for all available `node-sass` options.\n\n#### `Object`\n\nUse and object for the Sass implementation setup.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          \"style-loader\",\n          \"css-loader\",\n          {\n            loader: \"sass-loader\",\n            options: {\n              sassOptions: {\n                indentWidth: 4,\n                includePaths: [\"absolute/path/a\", \"absolute/path/b\"],\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n#### `Function`\n\nAllows to setup the Sass implementation by setting different options based on the loader context.\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          \"style-loader\",\n          \"css-loader\",\n          {\n            loader: \"sass-loader\",\n            options: {\n              sassOptions: (loaderContext) => {\n                // More information about available properties https://webpack.js.org/api/loaders/\n                const { resourcePath, rootContext } = loaderContext;\n                const relativePath = path.relative(rootContext, resourcePath);\n\n                if (relativePath === \"styles/foo.scss\") {\n                  return {\n                    includePaths: [\"absolute/path/c\", \"absolute/path/d\"],\n                  };\n                }\n\n                return {\n                  includePaths: [\"absolute/path/a\", \"absolute/path/b\"],\n                };\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `sourceMap`\n\nType: `Boolean`\nDefault: depends on the `compiler.devtool` value\n\nEnables/Disables generation of source maps.\n\nBy default generation of source maps depends on the [`devtool`](https://webpack.js.org/configuration/devtool/) option.\nAll values enable source map generation except `eval` and `false` value.\n\n> ℹ If a `true` the `sourceMap`, `sourceMapRoot`, `sourceMapEmbed`, `sourceMapContents` and `omitSourceMapUrl` from `sassOptions` will be ignored.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          \"style-loader\",\n          {\n            loader: \"css-loader\",\n            options: {\n              sourceMap: true,\n            },\n          },\n          {\n            loader: \"sass-loader\",\n            options: {\n              sourceMap: true,\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n> ℹ In some rare cases `node-sass` can output invalid source maps (it is a `node-sass` bug).\n\n> > In order to avoid this, you can try to update `node-sass` to latest version or you can try to set within `sassOptions` the `outputStyle` option to `compressed`.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          \"style-loader\",\n          \"css-loader\",\n          {\n            loader: \"sass-loader\",\n            options: {\n              sourceMap: true,\n              sassOptions: {\n                outputStyle: \"compressed\",\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `additionalData`\n\nType: `String|Function`\nDefault: `undefined`\n\nPrepends `Sass`/`SCSS` code before the actual entry file.\nIn this case, the `sass-loader` will not override the `data` option but just **prepend** the entry's content.\n\nThis is especially useful when some of your Sass variables depend on the environment:\n\n#### `String`\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          \"style-loader\",\n          \"css-loader\",\n          {\n            loader: \"sass-loader\",\n            options: {\n              additionalData: \"$env: \" + process.env.NODE_ENV + \";\",\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n#### `Function`\n\n##### Sync\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          \"style-loader\",\n          \"css-loader\",\n          {\n            loader: \"sass-loader\",\n            options: {\n              additionalData: (content, loaderContext) => {\n                // More information about available properties https://webpack.js.org/api/loaders/\n                const { resourcePath, rootContext } = loaderContext;\n                const relativePath = path.relative(rootContext, resourcePath);\n\n                if (relativePath === \"styles/foo.scss\") {\n                  return \"$value: 100px;\" + content;\n                }\n\n                return \"$value: 200px;\" + content;\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n##### Async\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          \"style-loader\",\n          \"css-loader\",\n          {\n            loader: \"sass-loader\",\n            options: {\n              additionalData: async (content, loaderContext) => {\n                // More information about available properties https://webpack.js.org/api/loaders/\n                const { resourcePath, rootContext } = loaderContext;\n                const relativePath = path.relative(rootContext, resourcePath);\n\n                if (relativePath === \"styles/foo.scss\") {\n                  return \"$value: 100px;\" + content;\n                }\n\n                return \"$value: 200px;\" + content;\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `webpackImporter`\n\nType: `Boolean`\nDefault: `true`\n\nEnables/Disables the default Webpack importer.\n\nThis can improve performance in some cases. Use it with caution because aliases and `@import` at-rules starting with `~` will not work.\nYou can pass own `importer` to solve this (see [`importer docs`](https://github.com/sass/node-sass#importer--v200---experimental)).\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          \"style-loader\",\n          \"css-loader\",\n          {\n            loader: \"sass-loader\",\n            options: {\n              webpackImporter: false,\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n## Examples\n\n### Extracts CSS into separate files\n\nFor production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on.\n\nThere are two possibilities to extract a style sheet from the bundle:\n\n- [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) (use this, when using webpack 4 configuration. Works in all use-cases)\n- [extract-loader](https://github.com/peerigon/extract-loader) (simpler, but specialized on the css-loader's output)\n\n**webpack.config.js**\n\n```js\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          // fallback to style-loader in development\n          process.env.NODE_ENV !== \"production\"\n            ? \"style-loader\"\n            : MiniCssExtractPlugin.loader,\n          \"css-loader\",\n          \"sass-loader\",\n        ],\n      },\n    ],\n  },\n  plugins: [\n    new MiniCssExtractPlugin({\n      // Options similar to the same options in webpackOptions.output\n      // both options are optional\n      filename: \"[name].css\",\n      chunkFilename: \"[id].css\",\n    }),\n  ],\n};\n```\n\n### Source maps\n\nEnables/Disables generation of source maps.\n\nTo enable CSS source maps, you'll need to pass the `sourceMap` option to the `sass-loader` _and_ the css-loader.\n\n**webpack.config.js**\n\n```javascript\nmodule.exports = {\n  devtool: \"source-map\", // any \"source-map\"-like devtool is possible\n  module: {\n    rules: [\n      {\n        test: /\\.s[ac]ss$/i,\n        use: [\n          \"style-loader\",\n          {\n            loader: \"css-loader\",\n            options: {\n              sourceMap: true,\n            },\n          },\n          {\n            loader: \"sass-loader\",\n            options: {\n              sourceMap: true,\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\nIf you want to edit the original Sass files inside Chrome, [there's a good blog post](https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0). Checkout [test/sourceMap](https://github.com/webpack-contrib/sass-loader/tree/master/test) for a running example.\n\n## Contributing\n\nPlease take a moment to read our contributing guidelines if you haven't yet done so.\n\n[CONTRIBUTING](./.github/CONTRIBUTING.md)\n\n## License\n\n[MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/sass-loader.svg\n[npm-url]: https://npmjs.com/package/sass-loader\n[node]: https://img.shields.io/node/v/sass-loader.svg\n[node-url]: https://nodejs.org\n[deps]: https://david-dm.org/webpack-contrib/sass-loader.svg\n[deps-url]: https://david-dm.org/webpack-contrib/sass-loader\n[tests]: https://github.com/webpack-contrib/sass-loader/workflows/sass-loader/badge.svg\n[tests-url]: https://github.com/webpack-contrib/sass-loader/actions\n[cover]: https://codecov.io/gh/webpack-contrib/sass-loader/branch/master/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack-contrib/sass-loader\n[chat]: https://badges.gitter.im/webpack/webpack.svg\n[chat-url]: https://gitter.im/webpack/webpack\n[size]: https://packagephobia.now.sh/badge?p=sass-loader\n[size-url]: https://packagephobia.now.sh/result?p=sass-loader\n","readmeFilename":"README.md"}