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

作用：

将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