{"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.","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install sass-resources-loader"],"cli":null},"imports":["import sassResourcesLoader from 'sass-resources-loader'","const sassResourcesLoader = require('sass-resources-loader')","// No TypeScript types officially published; use @types/sass-resources-loader"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}