style-resources-loader

1.5.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

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

cause Loader not installed in the project.

fix

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

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

cause Webpack cannot locate the loader in node_modules.

fix

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

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

cause patterns option is empty or undefined.

fix

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

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

cause 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)$/).

Warnings

gotcha Loader 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'

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

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

breaking In 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.

deprecated Support for Node.js <8.9 is dropped; use Node >=8.9. ↓

fix Upgrade Node.js to version 8.9 or higher.

Install

npm install style-resources-loader

yarn add style-resources-loader

pnpm add style-resources-loader

Imports

style-resources-loader

wrong

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

correct

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

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

styleResourcesLoader

wrong

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

correct

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

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

Injector

wrong

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

correct

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

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

Quickstart

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