Vue CLI Style Resources Loader Plugin

0.1.5 · maintenance · verified Sun Apr 19

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.

Common errors

```
Module not found: Error: Can't resolve 'sass-loader' in '...' OR Module build failed (from ../node_modules/sass-loader/dist/cjs.js):
```
cause 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]
```
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.

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')
```
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.

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.

Warnings

gotcha 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.
Fix: Install the required preprocessor loader: `npm install -D sass-loader node-sass` (for scss/sass), `less-loader less`, or `stylus-loader stylus`.
gotcha 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.
Fix: Use `path.resolve(__dirname, './src/styles/**/*.scss')` for robust path resolution. Verify patterns with a glob testing tool if unsure.
deprecated 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.
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.
gotcha 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.
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.

Install

npm install vue-cli-plugin-style-resources-loader npm
yarn add vue-cli-plugin-style-resources-loader yarn
pnpm add vue-cli-plugin-style-resources-loader pnpm

Imports

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
wrong:
```
'./src/styles/*.scss'
```
correct:
```
const path = require('path'); path.resolve(__dirname, './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.

Quickstart

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>

view raw JSON →