{"id":20534,"library":"sass-resources-loader","title":"sass-resources-loader","description":"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.","status":"active","version":"2.2.5","language":"javascript","source_language":"en","source_url":"https://github.com/shakacode/sass-resources-loader","tags":["javascript","css","sass","webpack"],"install":[{"cmd":"npm install sass-resources-loader","lang":"bash","label":"npm"},{"cmd":"yarn add sass-resources-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add sass-resources-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Requires sass-loader to process the loaded SASS/SCSS compilations","package":"sass-loader","optional":false},{"reason":"Core dependency – this is a Webpack loader","package":"webpack","optional":false},{"reason":"Sass compilation (optional if using Dart sass)","package":"node-sass","optional":true},{"reason":"Dart Sass compilation (optional if using node-sass); required for @use hoisting","package":"sass","optional":true}],"imports":[{"note":"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.","wrong":"const sassResourcesLoader = require('sass-resources-loader')","symbol":"default","correct":"import sassResourcesLoader from 'sass-resources-loader'"},{"note":"Named import is incorrect as there is no named export. Always use default import or require.","wrong":"import { sassResourcesLoader } from 'sass-resources-loader'","symbol":"sassResourcesLoader","correct":"const sassResourcesLoader = require('sass-resources-loader')"},{"note":"TypeScript definitions are not bundled with the package; install @types/sass-resources-loader for type support.","wrong":"","symbol":"Loader","correct":"// No TypeScript types officially published; use @types/sass-resources-loader"}],"quickstart":{"code":"// file: webpack.config.js\nconst path = require('path');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.scss$/,\n        use: [\n          'style-loader',\n          'css-loader',\n          'sass-loader',\n          {\n            loader: 'sass-resources-loader',\n            options: {\n              resources: [\n                path.resolve(__dirname, 'src/styles/variables.scss'),\n                path.resolve(__dirname, 'src/styles/mixins.scss')\n              ],\n              hoistUseStatements: true\n            }\n          }\n        ]\n      }\n    ]\n  }\n};","lang":"javascript","description":"Webpack configuration that injects variables.scss and mixins.scss into every SCSS file."},"warnings":[{"fix":"Use path.resolve(__dirname, 'src/resources.scss') or an absolute path.","message":"The 'resources' option must be absolute paths or relative to the project root, not relative to the loader context.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Switch to the 'sass' package (Dart Sass) and set hoistUseStatements: true if using @use.","message":"Use of node-sass is discouraged; it is unmaintained and incompatible with Sass @use syntax.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Configure rules: use: ['style-loader', 'css-loader', 'sass-loader', { loader: 'sass-resources-loader', options: {...} }].","message":"Loader order matters: sass-resources-loader must be placed after sass-loader in the use array, not before.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use unique naming conventions for resources (e.g., prefix with project name).","message":"When using CSS Modules, imported resources are not scoped and may cause conflicts if you have duplicate variable names.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update webpack config: resources: ['file1.scss'] instead of resources: 'file1.scss' (though both still work).","message":"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.","severity":"breaking","affected_versions":"<2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use absolute path: path.resolve(__dirname, 'resources.scss')","cause":"resources path is relative and not resolved correctly.","error":"Module build failed: Error: File to import not found or unreadable: ./resources.scss"},{"fix":"Check options: use exactly 'resources' (array or string) and 'hoistUseStatements' (boolean). Example: { loader: 'sass-resources-loader', options: { resources: [...] } }","cause":"Typo in options key (e.g., 'resource' instead of 'resources') or passing invalid type.","error":"ValidationError: Invalid options object. sass-resources-loader has been initialized using an options object that does not match the API schema."},{"fix":"Set hoistUseStatements: true in loader options to hoist existing @use statements above resources.","cause":"Sass @use rule is placed after injected resources when hoistUseStatements is false.","error":"Error: @use must be the first statement in the file, except for @forward or variable declarations."},{"fix":"Run npm install sass-resources-loader --save-dev","cause":"The loader is not installed or not in node_modules.","error":"Module not found: Error: Can't resolve 'sass-resources-loader'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}