Registry / devops / style-resources-loader

style-resources-loader

library1.5.0jsnpmunverified

A webpack loader that automatically injects CSS preprocessor resources (variables, mixins, functions) into all processed style files for Sass, SCSS, Less, and Stylus. v1.5.0 is the latest stable release, compatible with webpack 3, 4, and 5. It eliminates the need for manual @import statements in every file, simplifies theme customization (e.g., overriding Ant Design variables), and supports custom injectors (prepend/append) as well as glob patterns. Unlike similar tools (e.g., sass-loader prependData), it works across multiple preprocessors and allows resource file globbing.

devops web-framework

npm install style-resources-loader

github ↗package ↗

INSTALL

IMPORT

SIG · STYLE-RESOURCES-LO

style-resources-loader

devopsjavascriptv1.5.0

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.

style-resources-loader

✓ use in webpack config as { loader: 'style-resources-loader', options: {...} }

✗ const loader = require('style-resources-loader'); // Not intended for direct require()

This is a webpack loader, not a library you import in code. It's used in module.rules.

styleResourcesLoader

✓ import styleResourcesLoader from 'style-resources-loader' // Not a default export

✗ import { styleResourcesLoader } from 'style-resources-loader' // No named export

There is no JavaScript export; loader is used as string 'style-resources-loader' in webpack config.

Injector

✓ import type { Injector } from 'style-resources-loader' // Only in TypeScript, for custom injectors

✗ const { Injector } = require('style-resources-loader') // Not a runtime value

Type-only export available in TypeScript definitions; not used at runtime.

Configures style-resources-loader to automatically prepend SCSS variables and mixins to all .scss files via webpack.

// webpack.config.js const path = require('path'); module.exports = { module: { rules: [{ test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader', { loader: 'style-resources-loader', options: { patterns: [ path.resolve(__dirname, 'styles/variables/*.scss'), path.resolve(__dirname, 'styles/mixins/*.scss') ], injector: 'prepend' } } ] }] } };

Debug

Known issues

gotchaLoader must be placed after style-loader and css-loader but before sass-loader in the loaders array.

fix

Order in use array: ... 'style-loader', 'css-loader', 'sass-loader', 'style-resources-loader'

affects: all

gotchaPatterns are resolved relative to webpack's context option (default: process.cwd()), not relative to the config file.

fix

Use absolute paths with path.resolve(__dirname, ...) to avoid confusion.

affects: all

gotchaWhen using injector: 'append', resources are appended after the source file, which may cause specificity issues if variables are overridden.

fix

Use 'prepend' (default) unless you intentionally want to override existing variables.

affects: all

breakingIn v1.4.0, the options.patterns type changed from string array to string | string[]. Previously, glob options were passed directly; now use options.globOptions.

fix

If you passed glob options as second argument of patterns, move them to options.globOptions.

affects: >=1.4.0

deprecatedSupport for Node.js <8.9 is dropped; use Node >=8.9.

fix

Upgrade Node.js to version 8.9 or higher.

affects: >=1.5.0

Errors

Common errors & fixes

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

Loader not installed in the project.

fix

npm install style-resources-loader --save-dev

Error: Cannot find module 'style-resources-loader'

Webpack cannot locate the loader in node_modules.

fix

Ensure the loader is installed and your webpack resolve.modules includes node_modules.

TypeError: Cannot read properties of undefined (reading 'map')

patterns option is empty or undefined.

fix

Provide at least one pattern in options.patterns as a string or array of strings.

Error: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Loader test pattern does not match the file extension (e.g., test: /\.scss$/ but file is .css).

fix

Update the test regex to match your file types (e.g., test: /\.(scss|sass)$/).

Upgrade

Version history

1.5.0latest on npm

Audit

Dependencies

webpackrequiredpeer dependency; loader operates within webpack's module system

Agent activity

11 hits · last 30 days

node

Resources

githubhttps://github.com/yenshih/style-resources-loader ↗

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