{"id":20533,"library":"sass-loader","title":"sass-loader","description":"Webpack loader that compiles Sass/SCSS files to CSS, using Dart Sass, Node Sass, or Sass Embedded. Current stable version is 16.0.7, released in February 2026, with a monthly release cadence. Since v16, the default Sass API is the modern JS API (breaking change from legacy). It uses webpack's module resolution for @import and @use, eliminating the need for `~` prefix. Key differentiators: seamless integration with webpack ecosystem, support for multiple Sass implementations, and automatic resolution of Sass partials.","status":"active","version":"16.0.7","language":"javascript","source_language":"en","source_url":"https://github.com/webpack/sass-loader","tags":["javascript","sass","libsass","webpack","loader"],"install":[{"cmd":"npm install sass-loader","lang":"bash","label":"npm"},{"cmd":"yarn add sass-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add sass-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Sass compiler implementation (Dart Sass) – required peer dependency","package":"sass","optional":false},{"reason":"Alternative Sass implementation (faster) – preferred over sass since v15","package":"sass-embedded","optional":true},{"reason":"Webpack core – required peer dependency","package":"webpack","optional":false},{"reason":"Typically chained with sass-loader to process CSS output","package":"css-loader","optional":true},{"reason":"Typically chained with sass-loader to inject styles into DOM","package":"style-loader","optional":true}],"imports":[{"note":"sass-loader is used as a webpack loader, not imported directly. Use it in module.rules use array.","wrong":"const sassLoader = require('sass-loader'); module.exports = { module: { rules: [ { test: /\\.scss$/, loader: 'sass-loader' } ] } }","symbol":"default (loader config)","correct":"module.exports = { module: { rules: [ { test: /\\.s[ac]ss$/i, use: ['style-loader', 'css-loader', 'sass-loader'] } ] } }"},{"note":"Type-only import – use `import type` to avoid runtime inclusion. Only available in TypeScript.","wrong":"import { SassLoaderOptions } from 'sass-loader'","symbol":"SassLoaderOptions type","correct":"import type { SassLoaderOptions } from 'sass-loader'"},{"note":"sass-loader is a default export. In CJS, `require('sass-loader')` returns the loader function directly; no .default.","wrong":"const sassLoader = require('sass-loader').default","symbol":"default export (loader function)","correct":"import sassLoader from 'sass-loader'"}],"quickstart":{"code":"// webpack.config.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              // Use modern API (default since v16)\n              api: 'modern-compiler',\n              sassOptions: {\n                // Dart Sass options\n                style: 'compressed',\n                sourceMap: true,\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n\n// style.scss\n$body-color: red;\nbody {\n  color: $body-color;\n}\n\n// app.js\nimport './style.scss';","lang":"javascript","description":"Basic webpack configuration for compiling Sass/SCSS with Dart Sass via sass-loader, using the modern-compiler API introduced in v16."},"warnings":[{"fix":"If using legacy options, set `api: 'legacy'` in sass-loader options, or migrate to new API options (e.g., `sassOptions.style` instead of `outputStyle`).","message":"Since v16, the default Sass API is the modern JS API instead of legacy. Options like `outputStyle` are replaced with `style` under `sassOptions`.","severity":"breaking","affected_versions":">=16.0.0"},{"fix":"Explicitly set the `implementation` option to `require('sass')` or `require('sass-embedded')` to control which is used.","message":"Since v15, sass-loader prefers `sass-embedded` over `sass` by default if both are installed.","severity":"breaking","affected_versions":">=15.0.0"},{"fix":"Remove the `~` prefix from @import or @use statements; webpack resolves from node_modules automatically.","message":"Using `~` for importing from node_modules is deprecated and may be removed in a future major version.","severity":"deprecated","affected_versions":"*"},{"fix":"Use Dart Sass or Sass Embedded instead. Uninstall node-sass and install sass.","message":"Node Sass does not support Yarn PnP and the @use rule. Errors like `Module build failed: Error: Node Sass does not yet support your current environment` may occur.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure webpack config has a rule with test: /\\.s[ac]ss$/i and use array includes 'sass-loader'.","cause":"Missing sass-loader or incorrect webpack rule test pattern (e.g., only .scss but file is .sass).","error":"Module parse failed: Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type."},{"fix":"Set `api: 'legacy'` in sass-loader options or migrate to modern sass options: replace `outputStyle` with `style` in `sassOptions`.","cause":"Using modern API (default since v16) with legacy sass options (e.g., outputStyle instead of style).","error":"Error: Expected 'digits', 'function', or ... at line 1, column 2 of ..."},{"fix":"Run `npm install sass --save-dev` to install Dart Sass.","cause":"Sass implementation not installed (sass or sass-embedded is a peer dependency).","error":"Module not found: Error: Can't resolve 'sass'"},{"fix":"Use `const sassLoader = require('sass-loader');` (no .default) or `import sassLoader from 'sass-loader'`.","cause":"Incorrect import: using default export as named import, or wrong require path.","error":"TypeError: sassLoader is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}