Registry / web-framework / vue-cli-plugin-style-resources-loader

vue-cli-plugin-style-resources-loader

JSON →
library0.1.5jsnpmunverified

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.

web-framework
npm install vue-cli-plugin-style-resources-loader
github ↗package ↗
INSTALL
IMPORT
SIG · VUE-CLI-PLUGIN-STY
V
vue-cli-plugin-style-resources-loader
web-frameworkjavascriptv0.1.5
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

Configuration (vue.config.js)
✓ module.exports = { pluginOptions: { 'style-resources-loader': { /* ... config ... */ } } }
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.
Installation (CLI command)
✓ vue add style-resources-loader
The plugin is added to a Vue CLI project via the `vue add` command, which handles installation and initial setup.
path.resolve
✓ const path = require('path'); path.resolve(__dirname, './src/styles/*.scss')
✗ './src/styles/*.scss'
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.

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.

vue add style-resources-loader // Then, in your vue.config.js file: const path = require('path') module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'scss', // or 'sass', 'stylus', 'less' patterns: [ path.resolve(__dirname, './src/styles/abstracts/_variables.scss'), path.resolve(__dirname, './src/styles/abstracts/_mixins.scss'), path.resolve(__dirname, './src/styles/globals/*.scss') ] } } } // Example SCSS file (e.g., src/styles/globals/_variables.scss) // $primary-color: #42b983; // $font-stack: Helvetica, sans-serif; // Example Vue component style block (src/components/HelloWorld.vue) // <style lang="scss"> // .hello { // color: $primary-color; // $primary-color is automatically available // font-family: $font-stack; // } // </style>
Debug
Known issues
gotchaThe 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.
fix
Install the required preprocessor loader: `npm install -D sass-loader node-sass` (for scss/sass), `less-loader less`, or `stylus-loader stylus`.
affects: >=0.1.0
gotchaIncorrect 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.
fix
Use `path.resolve(__dirname, './src/styles/**/*.scss')` for robust path resolution. Verify patterns with a glob testing tool if unsure.
affects: >=0.1.0
deprecatedThis 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.
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.
affects: >=0.1.0
gotchaDue 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.
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.
affects: <=0.1.5
Errors
Common errors & fixes
Module not found: Error: Can't resolve 'sass-loader' in '...' OR Module build failed (from ../node_modules/sass-loader/dist/cjs.js):
The configured `preProcessor` (e.g., 'scss') requires a corresponding webpack loader that is not installed or incorrectly configured.
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).
Error: `patterns` must be a string or array of strings. You provided: [undefined]
The `patterns` option in `vue.config.js` is incorrectly defined, often due to a typo or incorrect import of `path` or `path.resolve` failing.
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`.
Cannot read property 'rule' of undefined (often related to 'chainWebpack')
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.
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.
Upgrade
Version history
0.1.5latest on npm
Audit
Dependencies
style-resources-loaderrequiredCore functionality is provided by this loader, which the plugin configures.
@vue/cli-servicerequiredThis is a Vue CLI plugin and relies on the Vue CLI service for its integration and webpack configuration modifications.
Agent activity
5 hits · last 30 days
node
4
OpenAI (training)
1
Resources
githubhttps://github.com/nguyenvanduocit/vue-cli-plugin-style-resources-loader ↗
packagehttps://www.npmjs.com/package/vue-cli-plugin-style-resources-loader ↗
vue-cli-plugin-style-resources-loader — npm install vue-cli-plugin-style-resources-loader · libregistry