vue项目插件：style-resoures-loader——样式文件自动注入

本文链接：https://blog.youkuaiyun.com/m0_66612315/article/details/122692292

style-resources-loader用于自动将CSS预处理器的公共样式变量、混入和函数注入到每个样式文件或Vue组件的style标签中，避免手动导入。本文介绍了在Vue项目中安装和配置style-resources-loader的方法，包括通过npm和vue-cli-plugin-style-resources-loader，以及在vue.config.js中的使用，以实现less预处理器的自动注入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作用：

将css 预处理器的一些公共的样式文件变量，比如：variables , mixins , functions自动注入到每个样式文件或者vue组件中style标签中；

避免在每个样式文件中手动的@import导入，然后在各个css 文件中直接使用变量。

一、插件安装

vue 项目中需要安装四个插件：

css 预处理插件 less,、less-loader（确保已安装）

再安装方法一：

1、style-resources-loader

官方安装及使用文档：https://www.npmjs.com/package/style-resources-loader#resolveurl

npm i style-resources-loader --save-dev

2、vue-cli-plugin-style-resources-loader

官方安装及使用文档：https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader

npm i style-resources-loader --save-dev

再安装方法二：直接使用 vue add style-resources-loader 安装

（vue add pluginName 是vue-cli3提供的。vue add 是用yarn安装插件的，如果安装失败的话，就采用方法一）

vue add style-resources-loader

安装完成后会让你自行选择预处理器，本文选择less预处理器

二、在vue.config.js中使用

const path = require('path')

module.exports = {
  // 编译完成后自动启动开发服务器。
  devServer: {
    open: true
  },

  // 通过 vue add style-resources-loader 安装插件后，自动添加的代码
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      // 要注入的资源的路径，需要用绝对路径
      patterns: [
        path.join(__dirname, './src/assets/styles/variables.less'),
        path.join(__dirname, './src/assets/styles/mixins.less')
      ]
    }
  }
}

三、重启项目：npm run serve