Registry / devops / sass-resources-loader

sass-resources-loader

library2.2.5jsnpmunverified

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.

devops

npm install sass-resources-loader

github ↗package ↗

INSTALL

IMPORT

SIG · SASS-RESOURCES-LOA

sass-resources-loader

devopsjavascriptv2.2.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import sassResourcesLoader from 'sass-resources-loader'

✗ const sassResourcesLoader = require('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

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

✗ import { sassResourcesLoader } from '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.

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 } } ] } ] } };

Debug

Known issues

gotchaThe '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.

affects: >=1.0.0

deprecatedUse 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.

affects: >=2.0.0

gotchaLoader 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: {...} }].

affects: >=1.0.0

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

affects: >=1.0.0

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

affects: <2.0.0

Errors

Common errors & fixes

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

resources path is relative and not resolved correctly.

fix

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

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

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: @use must be the first statement in the file, except for @forward or variable declarations.

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.

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

The loader is not installed or not in node_modules.

fix

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

Upgrade

Version history

2.2.5latest on npm

Audit

Dependencies

sass-loaderrequiredRequires sass-loader to process the loaded SASS/SCSS compilations

webpackrequiredCore dependency – this is a Webpack loader

node-sassoptionalSass compilation (optional if using Dart sass)

sassoptionalDart Sass compilation (optional if using node-sass); required for @use hoisting

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/shakacode/sass-resources-loader ↗

packagehttps://www.npmjs.com/package/sass-resources-loader ↗