{"id":12427,"library":"vue-cli-plugin-style-resources-loader","title":"Vue CLI Style Resources Loader Plugin","description":"This package is a Vue CLI plugin designed to simplify the integration of `style-resources-loader` into Vue projects managed by Vue CLI. Its primary function is to automatically inject global style resources, such as Sass variables, Less mixins, or Stylus functions, into all relevant preprocessor files across your project, eliminating the need for repetitive `@import` statements in every component or style block. The current stable version is `v0.1.5`. Release cadence has been irregular, primarily for dependency upgrades. While effective for existing Vue CLI projects, its relevance for new Vue 3 projects is diminishing as the ecosystem shifts towards build tools like Vite, which use different plugin architectures. It acts as a configuration abstraction over `style-resources-loader` itself.","status":"maintenance","version":"0.1.5","language":"javascript","source_language":"en","source_url":"https://github.com/nguyenvanduocit/vue-cli-plugin-style-resources-loader","tags":["javascript"],"install":[{"cmd":"npm install vue-cli-plugin-style-resources-loader","lang":"bash","label":"npm"},{"cmd":"yarn add vue-cli-plugin-style-resources-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-cli-plugin-style-resources-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core functionality is provided by this loader, which the plugin configures.","package":"style-resources-loader","optional":false},{"reason":"This is a Vue CLI plugin and relies on the Vue CLI service for its integration and webpack configuration modifications.","package":"@vue/cli-service","optional":false}],"imports":[{"note":"This plugin primarily integrates via `vue.config.js` and does not expose direct JavaScript/TypeScript symbols for import into application code. Interaction is declarative configuration.","symbol":"Configuration (vue.config.js)","correct":"module.exports = { pluginOptions: { 'style-resources-loader': { /* ... config ... */ } } }"},{"note":"The plugin is added to a Vue CLI project via the `vue add` command, which handles installation and initial setup.","symbol":"Installation (CLI command)","correct":"vue add style-resources-loader"},{"note":"When defining patterns for style resources, it is strongly recommended to use `path.resolve` to ensure absolute paths, preventing issues with varying webpack contexts or build environments. Relative paths can lead to resolution failures.","wrong":"'./src/styles/*.scss'","symbol":"path.resolve","correct":"const path = require('path'); path.resolve(__dirname, './src/styles/*.scss')"}],"quickstart":{"code":"vue add style-resources-loader\n\n// Then, in your vue.config.js file:\nconst path = require('path')\nmodule.exports = {\n  pluginOptions: {\n    'style-resources-loader': {\n      preProcessor: 'scss', // or 'sass', 'stylus', 'less'\n      patterns: [\n        path.resolve(__dirname, './src/styles/abstracts/_variables.scss'),\n        path.resolve(__dirname, './src/styles/abstracts/_mixins.scss'),\n        path.resolve(__dirname, './src/styles/globals/*.scss')\n      ]\n    }\n  }\n}\n\n// Example SCSS file (e.g., src/styles/globals/_variables.scss)\n// $primary-color: #42b983;\n// $font-stack: Helvetica, sans-serif;\n\n// Example Vue component style block (src/components/HelloWorld.vue)\n// <style lang=\"scss\">\n//   .hello {\n//     color: $primary-color; // $primary-color is automatically available\n//     font-family: $font-stack;\n//   }\n// </style>","lang":"javascript","description":"This quickstart demonstrates how to install the plugin using `vue add` and configure global style resource injection in `vue.config.js`. It shows how to automatically make Sass variables and mixins available in all `.scss` files without explicit `@import` statements."},"warnings":[{"fix":"Install the required preprocessor loader: `npm install -D sass-loader node-sass` (for scss/sass), `less-loader less`, or `stylus-loader stylus`.","message":"The plugin's functionality depends on `style-resources-loader`. Ensure you have the corresponding preprocessor loader (e.g., `sass-loader`, `less-loader`, `stylus-loader`) installed for your chosen `preProcessor` option, otherwise, compilation will fail with 'Module not found' errors.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use `path.resolve(__dirname, './src/styles/**/*.scss')` for robust path resolution. Verify patterns with a glob testing tool if unsure.","message":"Incorrect or ambiguous glob patterns in the `patterns` array can lead to resources not being injected or unexpected behavior. Always use absolute paths with `path.resolve` and test your glob patterns carefully.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"For new Vite projects, consider using a Vite plugin like `vite-plugin-style-resources` or manually configuring `vite.config.js` to achieve similar global style injection using Vite's native preprocessor options.","message":"This plugin is designed for Vue CLI projects. While Vue CLI is still maintained for existing projects, for new Vue 3 projects, the recommended build tool is Vite. This plugin is not compatible with Vite, and alternative solutions are required for similar global style injection in Vite-based setups.","severity":"deprecated","affected_versions":">=0.1.0"},{"fix":"If encountering issues, try pinning `style-resources-loader` to a compatible version, or investigate the underlying `style-resources-loader` repository for known compatibility issues.","message":"Due to the plugin's low version (0.x) and infrequent updates (last commit December 2021), it might not be compatible with the absolute latest versions of `style-resources-loader` or `webpack` that `vue-cli` might eventually adopt. Always test with your specific environment.","severity":"gotcha","affected_versions":"<=0.1.5"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install the necessary loader: `npm install -D sass-loader node-sass` (for Sass/SCSS), `npm install -D less-loader less` (for Less), or `npm install -D stylus-loader stylus` (for Stylus).","cause":"The configured `preProcessor` (e.g., 'scss') requires a corresponding webpack loader that is not installed or incorrectly configured.","error":"Module not found: Error: Can't resolve 'sass-loader' in '...' OR Module build failed (from ../node_modules/sass-loader/dist/cjs.js):"},{"fix":"Ensure `path = require('path')` is at the top of `vue.config.js` and all entries in the `patterns` array are valid strings, ideally absolute paths using `path.resolve`.","cause":"The `patterns` option in `vue.config.js` is incorrectly defined, often due to a typo or incorrect import of `path` or `path.resolve` failing.","error":"Error: `patterns` must be a string or array of strings. You provided: [undefined]"},{"fix":"Ensure that `pluginOptions` is used for the `style-resources-loader` configuration and avoid conflicting `chainWebpack` rules that target the same preprocessor loaders that the plugin is attempting to configure. Consult the `vue-cli` documentation for proper `chainWebpack` usage.","cause":"While `vue-cli-plugin-style-resources-loader` handles most configurations, manual `chainWebpack` modifications that conflict or are incorrectly structured can break the setup, particularly when mixing plugin-based configuration with direct webpack chaining.","error":"Cannot read property 'rule' of undefined (often related to 'chainWebpack')"}],"ecosystem":"npm"}