sass-resources-loader

2.2.5 verified Sat Apr 25 auth: no javascript

A Webpack loader that automatically injects shared SASS/SCSS resources (variables, mixins, functions) into every imported SASS file, eliminating manual @import statements. Currently at version 2.2.5, it supports Webpack 4 and 5, and works with both node-sass and Dart sass. It also supports Sass @use syntax via the hoistUseStatements option when using Dart Sass. Unlike manual imports or other loaders like sass-loader's prependData, this loader specifically targets CSS Modules workflows and can hoist @use statements to comply with Sass module system rules.

Common errors

error Module build failed: Error: File to import not found or unreadable: ./resources.scss ↓

cause resources path is relative and not resolved correctly.

fix

Use absolute path: path.resolve(__dirname, 'resources.scss')

error ValidationError: Invalid options object. sass-resources-loader has been initialized using an options object that does not match the API schema. ↓

cause Typo in options key (e.g., 'resource' instead of 'resources') or passing invalid type.

fix

Check options: use exactly 'resources' (array or string) and 'hoistUseStatements' (boolean). Example: { loader: 'sass-resources-loader', options: { resources: [...] } }

error Error: @use must be the first statement in the file, except for @forward or variable declarations. ↓

cause Sass @use rule is placed after injected resources when hoistUseStatements is false.

fix

Set hoistUseStatements: true in loader options to hoist existing @use statements above resources.

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

cause The loader is not installed or not in node_modules.

fix

Run npm install sass-resources-loader --save-dev

Warnings

gotcha The 'resources' option must be absolute paths or relative to the project root, not relative to the loader context. ↓

fix Use path.resolve(__dirname, 'src/resources.scss') or an absolute path.

deprecated Use of node-sass is discouraged; it is unmaintained and incompatible with Sass @use syntax. ↓

fix Switch to the 'sass' package (Dart Sass) and set hoistUseStatements: true if using @use.

gotcha Loader order matters: sass-resources-loader must be placed after sass-loader in the use array, not before. ↓

fix Configure rules: use: ['style-loader', 'css-loader', 'sass-loader', { loader: 'sass-resources-loader', options: {...} }].

gotcha When using CSS Modules, imported resources are not scoped and may cause conflicts if you have duplicate variable names. ↓

fix Use unique naming conventions for resources (e.g., prefix with project name).

breaking Upgrading from v1 to v2 changed the resources option to accept an array and cleaned up internal logic; old string-only config still works but array is preferred. ↓

fix Update webpack config: resources: ['file1.scss'] instead of resources: 'file1.scss' (though both still work).

Install

npm install sass-resources-loader

yarn add sass-resources-loader

pnpm add sass-resources-loader

Imports

default
wrong
```
const sassResourcesLoader = require('sass-resources-loader')
```
correct
```
import sassResourcesLoader from 'sass-resources-loader'
```
sass-resources-loader is a CommonJS module, so both import and require work in Webpack config. Default import is typical for loaders. Use in webpack.config.js under module.rules.

sassResourcesLoader

wrong

import { sassResourcesLoader } from 'sass-resources-loader'

correct

const sassResourcesLoader = require('sass-resources-loader')

Named import is incorrect as there is no named export. Always use default import or require.

Loader
```
// No TypeScript types officially published; use @types/sass-resources-loader
```
TypeScript definitions are not bundled with the package; install @types/sass-resources-loader for type support.

Quickstart

Webpack configuration that injects variables.scss and mixins.scss into every SCSS file.

// file: webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: [
                path.resolve(__dirname, 'src/styles/variables.scss'),
                path.resolve(__dirname, 'src/styles/mixins.scss')
              ],
              hoistUseStatements: true
            }
          }
        ]
      }
    ]
  }
};