{"id":20578,"library":"style-resources-loader","title":"style-resources-loader","description":"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.","status":"active","version":"1.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/yenshih/style-resources-loader","tags":["javascript","webpack","loader","style","css","sass","scss","less","stylus"],"install":[{"cmd":"npm install style-resources-loader","lang":"bash","label":"npm"},{"cmd":"yarn add style-resources-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add style-resources-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; loader operates within webpack's module system","package":"webpack","optional":false}],"imports":[{"note":"This is a webpack loader, not a library you import in code. It's used in module.rules.","wrong":"const loader = require('style-resources-loader'); // Not intended for direct require()","symbol":"style-resources-loader","correct":"use in webpack config as { loader: 'style-resources-loader', options: {...} }"},{"note":"There is no JavaScript export; loader is used as string 'style-resources-loader' in webpack config.","wrong":"import { styleResourcesLoader } from 'style-resources-loader' // No named export","symbol":"styleResourcesLoader","correct":"import styleResourcesLoader from 'style-resources-loader' // Not a default export"},{"note":"Type-only export available in TypeScript definitions; not used at runtime.","wrong":"const { Injector } = require('style-resources-loader') // Not a runtime value","symbol":"Injector","correct":"import type { Injector } from 'style-resources-loader' // Only in TypeScript, for custom injectors"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\nmodule.exports = {\n  module: {\n    rules: [{\n      test: /\\.scss$/,\n      use: [\n        'style-loader',\n        'css-loader',\n        'sass-loader',\n        {\n          loader: 'style-resources-loader',\n          options: {\n            patterns: [\n              path.resolve(__dirname, 'styles/variables/*.scss'),\n              path.resolve(__dirname, 'styles/mixins/*.scss')\n            ],\n            injector: 'prepend'\n          }\n        }\n      ]\n    }]\n  }\n};","lang":"javascript","description":"Configures style-resources-loader to automatically prepend SCSS variables and mixins to all .scss files via webpack."},"warnings":[{"fix":"Order in use array: ... 'style-loader', 'css-loader', 'sass-loader', 'style-resources-loader'","message":"Loader must be placed after style-loader and css-loader but before sass-loader in the loaders array.","severity":"gotcha","affected_versions":"all"},{"fix":"Use absolute paths with path.resolve(__dirname, ...) to avoid confusion.","message":"Patterns are resolved relative to webpack's context option (default: process.cwd()), not relative to the config file.","severity":"gotcha","affected_versions":"all"},{"fix":"Use 'prepend' (default) unless you intentionally want to override existing variables.","message":"When using injector: 'append', resources are appended after the source file, which may cause specificity issues if variables are overridden.","severity":"gotcha","affected_versions":"all"},{"fix":"If you passed glob options as second argument of patterns, move them to options.globOptions.","message":"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.","severity":"breaking","affected_versions":">=1.4.0"},{"fix":"Upgrade Node.js to version 8.9 or higher.","message":"Support for Node.js <8.9 is dropped; use Node >=8.9.","severity":"deprecated","affected_versions":">=1.5.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install style-resources-loader --save-dev","cause":"Loader not installed in the project.","error":"Module not found: Error: Can't resolve 'style-resources-loader'"},{"fix":"Ensure the loader is installed and your webpack resolve.modules includes node_modules.","cause":"Webpack cannot locate the loader in node_modules.","error":"Error: Cannot find module 'style-resources-loader'"},{"fix":"Provide at least one pattern in options.patterns as a string or array of strings.","cause":"patterns option is empty or undefined.","error":"TypeError: Cannot read properties of undefined (reading 'map')"},{"fix":"Update the test regex to match your file types (e.g., test: /\\.(scss|sass)$/).","cause":"Loader test pattern does not match the file extension (e.g., test: /\\.scss$/ but file is .css).","error":"Error: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}