sass-loader

16.0.7 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. ↓

cause Missing sass-loader or incorrect webpack rule test pattern (e.g., only .scss but file is .sass).

fix

Ensure webpack config has a rule with test: /\.s[ac]ss$/i and use array includes 'sass-loader'.

error Error: Expected 'digits', 'function', or ... at line 1, column 2 of ... ↓

cause Using modern API (default since v16) with legacy sass options (e.g., outputStyle instead of style).

fix

Set api: 'legacy' in sass-loader options or migrate to modern sass options: replace outputStyle with style in sassOptions.

error Module not found: Error: Can't resolve 'sass' ↓

cause Sass implementation not installed (sass or sass-embedded is a peer dependency).

fix

Run npm install sass --save-dev to install Dart Sass.

error TypeError: sassLoader is not a function ↓

cause Incorrect import: using default export as named import, or wrong require path.

fix

Use const sassLoader = require('sass-loader'); (no .default) or import sassLoader from 'sass-loader'.

Warnings

breaking Since v16, the default Sass API is the modern JS API instead of legacy. Options like `outputStyle` are replaced with `style` under `sassOptions`. ↓

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`).

breaking Since v15, sass-loader prefers `sass-embedded` over `sass` by default if both are installed. ↓

fix Explicitly set the `implementation` option to `require('sass')` or `require('sass-embedded')` to control which is used.

deprecated Using `~` for importing from node_modules is deprecated and may be removed in a future major version. ↓

fix Remove the `~` prefix from @import or @use statements; webpack resolves from node_modules automatically.

gotcha 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. ↓

fix Use Dart Sass or Sass Embedded instead. Uninstall node-sass and install sass.

Install

npm install sass-loader

yarn add sass-loader

pnpm add sass-loader

Imports

default (loader config)

wrong

const sassLoader = require('sass-loader'); module.exports = { module: { rules: [ { test: /\.scss$/, loader: 'sass-loader' } ] } }

correct

module.exports = { module: { rules: [ { test: /\.s[ac]ss$/i, use: ['style-loader', 'css-loader', 'sass-loader'] } ] } }

sass-loader is used as a webpack loader, not imported directly. Use it in module.rules use array.

SassLoaderOptions type
wrong
```
import { SassLoaderOptions } from 'sass-loader'
```
correct
```
import type { SassLoaderOptions } from 'sass-loader'
```
Type-only import – use `import type` to avoid runtime inclusion. Only available in TypeScript.
default export (loader function)
wrong
```
const sassLoader = require('sass-loader').default
```
correct
```
import sassLoader from 'sass-loader'
```
sass-loader is a default export. In CJS, `require('sass-loader')` returns the loader function directly; no .default.

Quickstart

Basic webpack configuration for compiling Sass/SCSS with Dart Sass via sass-loader, using the modern-compiler API introduced in v16.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              // Use modern API (default since v16)
              api: 'modern-compiler',
              sassOptions: {
                // Dart Sass options
                style: 'compressed',
                sourceMap: true,
              },
            },
          },
        ],
      },
    ],
  },
};

// style.scss
$body-color: red;
body {
  color: $body-color;
}

// app.js
import './style.scss';