一、简介

在vue项目中，如果定义了公共样式后，往往需要在每个文件里单独引入，效率太低也麻烦，可通过vuecli的style-resoures-loader插件来完成自动注入到每个scss/less文件或者vue组件中style标签中。

二、使用步骤

1、引入style-resources-loader

vue add style-resources-loader

预处理器的选择根据自己的项目来选择

2、配置vue.config.js

安装完后在vue.config.js中会自动添加配置

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: []
    }
  }
}

引入内置模块path,并在patterns添加需要全局布置的文件

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.join(__dirname, './src/assets/styles/variables.less'),
        path.join(__dirname, './src/assets/styles/mixins.less')
      ]
    }
  }
}

注意：配置完后要重新编译