Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
default (loader config)
✓ module.exports = { module: { rules: [ { test: /\.s[ac]ss$/i, use: ['style-loader', 'css-loader', 'sass-loader'] } ] } }
✗ const sassLoader = require('sass-loader'); module.exports = { module: { rules: [ { test: /\.scss$/, loader: 'sass-loader' } ] } }
sass-loader is used as a webpack loader, not imported directly. Use it in module.rules use array.
SassLoaderOptions type
✓ import type { SassLoaderOptions } from 'sass-loader'
✗ import { SassLoaderOptions } from 'sass-loader'
Type-only import – use `import type` to avoid runtime inclusion. Only available in TypeScript.
default export (loader function)
✓ import sassLoader from 'sass-loader'
✗ const sassLoader = require('sass-loader').default
sass-loader is a default export. In CJS, `require('sass-loader')` returns the loader function directly; no .default.
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';
Errors
Common errors & fixes
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
Missing sass-loader or incorrect webpack rule test pattern (e.g., only .scss but file is .sass).
fixEnsure webpack config has a rule with test: /\.s[ac]ss$/i and use array includes 'sass-loader'.
Error: Expected 'digits', 'function', or ... at line 1, column 2 of ...
Using modern API (default since v16) with legacy sass options (e.g., outputStyle instead of style).
fixSet `api: 'legacy'` in sass-loader options or migrate to modern sass options: replace `outputStyle` with `style` in `sassOptions`.
Module not found: Error: Can't resolve 'sass'
Sass implementation not installed (sass or sass-embedded is a peer dependency).
fixRun `npm install sass --save-dev` to install Dart Sass.
TypeError: sassLoader is not a function
Incorrect import: using default export as named import, or wrong require path.
fixUse `const sassLoader = require('sass-loader');` (no .default) or `import sassLoader from 'sass-loader'`. Audit
Dependencies
sassrequiredSass compiler implementation (Dart Sass) – required peer dependency
sass-embeddedoptionalAlternative Sass implementation (faster) – preferred over sass since v15
webpackrequiredWebpack core – required peer dependency
css-loaderoptionalTypically chained with sass-loader to process CSS output
style-loaderoptionalTypically chained with sass-loader to inject styles into DOM