{"id":31611499,"url":"https://github.com/webpack/sass-loader","last_synced_at":"2025-10-08T01:50:05.272Z","repository":{"id":13965164,"uuid":"16665655","full_name":"webpack/sass-loader","owner":"webpack","description":"Compiles Sass to CSS","archived":false,"fork":false,"pushed_at":"2025-10-05T20:32:30.000Z","size":20051,"stargazers_count":3904,"open_issues_count":3,"forks_count":429,"subscribers_count":54,"default_branch":"main","last_synced_at":"2025-10-05T22:56:56.871Z","etag":null,"topics":["dart-sass","loader","node-sass","sass","scss","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webpack.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"open_collective":"webpack"}},"created_at":"2014-02-09T12:06:00.000Z","updated_at":"2025-10-05T20:32:33.000Z","dependencies_parsed_at":"2024-04-16T18:00:16.122Z","dependency_job_id":"49cb94c0-a2c0-4907-b236-b234e8ac11df","html_url":"https://github.com/webpack/sass-loader","commit_stats":{"total_commits":675,"total_committers":111,"mean_commits":6.081081081081081,"dds":0.6844444444444444,"last_synced_commit":"38c79b5a5448284d841141046b6baee427363f98"},"previous_names":["jtangelder/sass-loader","webpack/sass-loader","webpack-contrib/sass-loader"],"tags_count":102,"template":false,"template_full_name":null,"purl":"pkg:github/webpack/sass-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fsass-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fsass-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fsass-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fsass-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webpack","download_url":"https://codeload.github.com/webpack/sass-loader/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fsass-loader/sbom","scorecard":{"id":539847,"data":{"date":"2025-07-28","repo":{"name":"github.com/webpack-contrib/sass-loader","commit":"99061778fd25a30e8e9f8f2df337a20867fe4874"},"scorecard":{"version":"v5.2.1-26-g4feedb85","commit":"4feedb857ab8d82158aa9774bf8054df41992180"},"score":5.1,"checks":[{"name":"Maintained","score":7,"reason":"7 commit(s) and 2 issue activity found in the last 90 days -- score normalized to 7","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":10,"reason":"GitHub workflow tokens follow principle of least privilege","details":["Info: topLevel 'contents' permission set to 'read': .github/workflows/dependency-review.yml:5","Info: topLevel 'contents' permission set to 'read': .github/workflows/nodejs.yml:14","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#cii-best-practices"}},{"name":"Code-Review","score":4,"reason":"Found 10/24 approved changesets -- score normalized to 4","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#binary-artifacts"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#license"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#branch-protection"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#signed-releases"}},{"name":"Pinned-Dependencies","score":3,"reason":"dependency not pinned by hash detected -- score normalized to 3","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/dependency-review.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/sass-loader/dependency-review.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/dependency-review.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/sass-loader/dependency-review.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/sass-loader/nodejs.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/sass-loader/nodejs.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:78: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/sass-loader/nodejs.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:80: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/sass-loader/nodejs.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:86: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/sass-loader/nodejs.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/nodejs.yml:106: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/sass-loader/nodejs.yml/master?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/nodejs.yml:101","Info:   0 out of   7 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned","Info:   2 out of   3 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#pinned-dependencies"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 24 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"10 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-vc8w-jr9v-vj7f","Warn: Project is vulnerable to: GHSA-9mvj-f7w8-pvh2","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-20T07:56:45.869Z","repository_id":13965164,"created_at":"2025-08-20T07:56:45.870Z","updated_at":"2025-08-20T07:56:45.870Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278533270,"owners_count":26002529,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dart-sass","loader","node-sass","sass","scss","webpack","webpack-loader"],"created_at":"2025-10-06T10:01:10.266Z","updated_at":"2025-10-08T01:50:05.266Z","avatar_url":"https://github.com/webpack.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg height=\"170\"\n    src=\"https://worldvectorlogo.com/logos/sass-1.svg\"\u003e\n  \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n    \u003cimg width=\"200\" height=\"200\"\n      src=\"https://webpack.js.org/assets/icon-square-big.svg\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![tests][tests]][tests-url]\n[![coverage][cover]][cover-url]\n[![discussion][discussion]][discussion-url]\n[![size][size]][size-url]\n[![discord-invite][discord-invite]][discord-url]\n\n# sass-loader\n\nLoads a Sass/SCSS file and compiles it to CSS.\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\nor\n\n```console\nyarn add -D sass-loader sass webpack\n```\n\nor\n\n```console\npnpm add -D sass-loader sass webpack\n```\n\n\u003e [!NOTE]\n\u003e\n\u003e To enable CSS processing in your project, you need to install [style-loader](https://webpack.js.org/loaders/style-loader/) and [css-loader](https://webpack.js.org/loaders/css-loader/) via `npm i style-loader css-loader`.\n\n`sass-loader` requires you to install either [Dart Sass](https://github.com/sass/dart-sass), [Node Sass](https://github.com/sass/node-sass) on your own (more documentation can be found below) or [Sass Embedded](https://github.com/sass/embedded-host-node).\n\nThis allows you to control the versions of all your dependencies and to choose which Sass implementation to use.\n\n\u003e [!NOTE]\n\u003e\n\u003e We highly recommend using [Sass Embedded](https://github.com/sass/embedded-host-node) or [Dart Sass](https://github.com/sass/dart-sass).\n\n\u003e [!WARNING]\n\u003e\n\u003e [Node Sass](https://github.com/sass/node-sass) does not work with [Yarn PnP](https://classic.yarnpkg.com/en/docs/pnp/) and doesn't support [@use rule](https://sass-lang.com/documentation/at-rules/use).\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 with 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 (e.g., via CLI or an npm script).\n\n### The `style` (new API, by default since 16 version) and `outputStyle` (old API) options in `production` mode\n\nFor `production` mode, the `style` (new API, by default since 16 version) and `outputStyle` (old API) options default to `compressed` unless otherwise specified in `sassOptions`.\n\n### Resolving `import` and `use` 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, enabling you to import your Sass modules from `node_modules`.\n\n```scss\n@import \"bootstrap\";\n```\n\nUsing `~` is deprecated and should be removed from your code, but we still support it for historical reasons.\n\nWhy can you remove it? The loader will first try to resolve `@import` as a relative path. If it cannot be resolved, then the loader will try to resolve `@import` inside [`node_modules`](https://webpack.js.org/configuration/resolve/#resolvemodules).\n\nPrepending module paths with a `~` tells webpack to search through [`node_modules`](https://webpack.js.org/configuration/resolve/#resolvemodules).\n\n```scss\n@import \"~bootstrap\";\n```\n\nIt's important to prepend the path with only `~`, because `~/` resolves to the home directory.\n\nWebpack needs to distinguish between `bootstrap` and `~bootstrap` because CSS and Sass files have no special syntax for importing relative files.\n\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`, URLs must be relative to your web root.\n\nYou might be surprised by this first issue, as 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 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\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- **[`implementation`](#implementation)**\n- **[`sassOptions`](#sassoptions)**\n- **[`sourceMap`](#sourcemap)**\n- **[`additionalData`](#additionaldata)**\n- **[`webpackImporter`](#webpackimporter)**\n- **[`warnRuleAsWarning`](#warnruleaswarning)**\n- **[`api`](#api)**\n\n### `implementation`\n\nType:\n\n```ts\ntype implementation = object | string;\n```\n\nDefault: `sass`\n\nThe special `implementation` option determines which implementation of Sass to use.\n\nBy default, the loader resolves the implementation based on your dependencies.\nJust add the desired implementation to your `package.json` (`sass`, `sass-embedded`, or `node-sass` package) and install dependencies.\n\nExample where the `sass-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` 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\nExample where the `sass-loader` uses the `sass-embedded` implementation:\n\n**package.json**\n\n```json\n{\n  \"devDependencies\": {\n    \"sass-loader\": \"^7.2.0\",\n    \"sass\": \"^1.22.10\"\n  },\n  \"optionalDependencies\": {\n    \"sass-embedded\": \"^1.70.0\"\n  }\n}\n```\n\n\u003e [!NOTE]\n\u003e\n\u003e Using `optionalDependencies` means that `sass-loader` can fallback to `sass` when running on an operating system not supported by `sass-embedded`\n\nBe aware of the order that `sass-loader` will resolve the implementation:\n\n1. `sass-embedded`\n2. `sass`\n3. `node-sass`\n\nYou can specify a specific implementation by using the `implementation` option, which accepts one of the above values.\n\n#### `object`\n\nFor example, to always 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`, even if `sass-embedded` is available\n              implementation: require(\"sass\"),\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n#### `string`\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`, even if `sass-embedded` is available\n              implementation: require.resolve(\"sass\"),\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `sassOptions`\n\nType:\n\n```ts\ntype sassOptions =\n  | import(\"sass\").LegacyOptions\u003c\"async\"\u003e\n  | ((\n      content: string | Buffer,\n      loaderContext: LoaderContext,\n      meta: any,\n    ) =\u003e import(\"sass\").LegacyOptions\u003c\"async\"\u003e);\n```\n\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\u003e [!NOTE]\n\u003e\n\u003e The `charset` option is `true` by default for `dart-sass`. We strongly discourage setting this to `false` because webpack doesn't support files other than `utf-8`.\n\n\u003e [!NOTE]\n\u003e\n\u003e The `syntax` (new API, by default since 16 version) and `indentedSyntax` (old API) option is `scss` for the `scss` extension, `indented` for the `sass` extension, and `css` for the `css` extension.\n\n\u003e [!NOTE]\n\u003e\n\u003e Options such as `data` and `file` are unavailable and will be ignored.\n\n\u003e ℹ We strongly discourage changing the `sourceMap` (new API, by default since 16 version), `outFile` (old API), `sourceMapContents` (old API), `sourceMapEmbed` (old API), and `sourceMapRoot` (old API) options because `sass-loader` sets these automatically when the `sourceMap` option is `true`.\n\n\u003e [!NOTE]\n\u003e\n\u003e 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 options for `sass` (`dart-sass`) and `node-sass`.\n\nPlease consult their respective documentation before using them:\n\n- [Dart Sass documentation](https://sass-lang.com/documentation/js-api/interfaces/Options) for all available `sass` options.\n- [Sass Embedded documentation](https://github.com/sass/embedded-host-node) 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 an 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                style: \"compressed\",\n                loadPaths: [\"absolute/path/a\", \"absolute/path/b\"],\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n#### `function`\n\nAllows configuring the Sass implementation with 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) =\u003e {\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                    loadPaths: [\"absolute/path/c\", \"absolute/path/d\"],\n                  };\n                }\n\n                return {\n                  loadPaths: [\"absolute/path/a\", \"absolute/path/b\"],\n                };\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `sourceMap`\n\nType:\n\n```ts\ntype sourceMap = boolean;\n```\n\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`.\n\n\u003e ℹ If `true`, the `sourceMap` (new API, by default since 16 version), `outFile` (old API), `sourceMapContents` (old API), `sourceMapEmbed` (old API), and `sourceMapRoot` (old API) 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\u003e ℹ In some rare cases `node-sass` can output invalid source maps (this is a `node-sass` bug).\n\u003e\n\u003e In order to avoid this, you can try to update `node-sass` to the 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:\n\n```ts\ntype additionalData =\n  | string\n  | ((content: string | Buffer, loaderContext: LoaderContext) =\u003e string);\n```\n\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) =\u003e {\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) =\u003e {\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:\n\n```ts\ntype webpackImporter = boolean;\n```\n\nDefault: `true`\n\nEnables/disables the default webpack importer.\n\nThis can improve performance in some cases, though use it with caution because aliases and `@import` at-rules starting with `~` will not work.\nYou can pass your 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### `warnRuleAsWarning`\n\nType:\n\n```ts\ntype warnRuleAsWarning = boolean;\n```\n\nDefault: `true`\n\nTreats the `@warn` rule as a webpack warning.\n\n**style.scss**\n\n```scss\n$known-prefixes: webkit, moz, ms, o;\n\n@mixin prefix($property, $value, $prefixes) {\n  @each $prefix in $prefixes {\n    @if not index($known-prefixes, $prefix) {\n      @warn \"Unknown prefix #{$prefix}.\";\n    }\n\n    -#{$prefix}-#{$property}: $value;\n  }\n  #{$property}: $value;\n}\n\n.tilt {\n  // Oops, we typo'd \"webkit\" as \"wekbit\"!\n  @include prefix(transform, rotate(15deg), wekbit ms);\n}\n```\n\nThe presented code will throw a webpack warning instead of logging.\n\nTo ignore unnecessary warnings you can use the [ignoreWarnings](https://webpack.js.org/configuration/other-options/#ignorewarnings) 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              warnRuleAsWarning: true,\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `api`\n\nType:\n\n```ts\ntype api = \"legacy\" | \"modern\" | \"modern-compiler\";\n```\n\nDefault: `\"modern\"` for `sass` (`dart-sass`) and `sass-embedded`, or `\"legacy\"` for `node-sass`\n\nAllows you to switch between the `legacy` and `modern` APIs. You can find more information [here](https://sass-lang.com/documentation/js-api). The `modern-compiler` option enables the modern API with support for [Shared Resources](https://github.com/sass/sass/blob/main/accepted/shared-resources.d.ts.md).\n\n\u003e [!NOTE]\n\u003e\n\u003e Using `modern-compiler` and `sass-embedded` together significantly improves performance and decreases build time. We strongly recommend their use. We will enable them by default in a future major release.\n\n\u003e [!WARNING]\n\u003e\n\u003e The Sass options are different for the `legacy` and `modern` APIs. Please look at [docs](https://sass-lang.com/documentation/js-api) to learn how to migrate to the modern options.\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              api: \"modern-compiler\",\n              sassOptions: {\n                // Your sass options\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n## How to enable `@debug` output\n\nBy default, the output of `@debug` messages is disabled.\nAdd the following to **webpack.config.js** to enable them:\n\n```js\nmodule.exports = {\n  stats: {\n    loggingDebug: [\"sass-loader\"],\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 to enable parallel loading of CSS/JS resources.\n\nThere are four recommended ways to extract a stylesheet from a bundle:\n\n#### 1. [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)\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#### 2. [Asset Modules](https://webpack.js.org/guides/asset-modules/)\n\n**webpack.config.js**\n\n```js\nconst path = require(\"node:path\");\n\nmodule.exports = {\n  entry: [path.resolve(__dirname, \"./src/scss/app.scss\")],\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        exclude: /node_modules/,\n        use: [],\n      },\n      {\n        test: /\\.scss$/,\n        exclude: /node_modules/,\n        type: \"asset/resource\",\n        generator: {\n          filename: \"bundle.css\",\n        },\n        use: [\"sass-loader\"],\n      },\n    ],\n  },\n};\n```\n\n#### 3. [extract-loader](https://github.com/peerigon/extract-loader) (simpler, but specialized on the css-loader's output)\n\n#### 4. [file-loader](https://github.com/webpack-contrib/file-loader) (deprecated--should only be used in webpack v4)\n\n**webpack.config.js**\n\n```js\nconst path = require(\"node:path\");\n\nmodule.exports = {\n  entry: [path.resolve(__dirname, \"./src/scss/app.scss\")],\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        exclude: /node_modules/,\n        use: [],\n      },\n      {\n        test: /\\.scss$/,\n        exclude: /node_modules/,\n        use: [\n          {\n            loader: \"file-loader\",\n            options: { outputPath: \"css/\", name: \"[name].min.css\" },\n          },\n          \"sass-loader\",\n        ],\n      },\n    ],\n  },\n};\n```\n\n(source: https://stackoverflow.com/a/60029923/2969615)\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 both 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).\nCheckout [test/sourceMap](https://github.com/webpack/sass-loader/tree/main/test) for a working example.\n\n## Contributing\n\nWe welcome all contributions!\nIf you're new here, please take a moment to review our contributing guidelines before submitting issues or pull requests.\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[tests]: https://github.com/webpack/sass-loader/workflows/sass-loader/badge.svg\n[tests-url]: https://github.com/webpack/sass-loader/actions\n[cover]: https://codecov.io/gh/webpack/sass-loader/branch/main/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack/sass-loader\n[discussion]: https://img.shields.io/github/discussions/webpack/webpack\n[discussion-url]: https://github.com/webpack/webpack/discussions\n[size]: https://packagephobia.now.sh/badge?p=sass-loader\n[size-url]: https://packagephobia.now.sh/result?p=sass-loader\n[discord-invite]: https://img.shields.io/discord/1180618526436888586?style=flat\u0026logo=discord\u0026logoColor=white\u0026label=discord\n[discord-url]: https://discord.gg/ARKBCXBu\n","funding_links":["https://opencollective.com/webpack"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack%2Fsass-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebpack%2Fsass-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack%2Fsass-loader/lists"}