vue-cli3全局引入less文件

开发中有一个less文件，可能整个项目都会用到，你是不是尝试在根组件App.vue的样式中引入该文件，然后在其他组件中使用该less文件中定义的变量啥的，居然发现变量没有定义，呵呵哒，根组件引入是不行的，需要单独在组件中引入该文件，单独引入太麻烦了，那索性去配置一下吧！

首先less相关的依赖安装一下吧

npm install less --save-dev
npm install less-loader --save-dev
npm install stylus-resources-loader --save-dev

然后src同级目录下创建一个vue.config.js文件

const path = require('path')

function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, 'src/less/index.less'),//全局引入的less文件
      ],
    })
}
module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
  },

//路径别名的配置
  configureWebpack: (config) => {
    Object.assign(config, {
      // 开发生产共同配置
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          '@c': path.resolve(__dirname, './src/components'),
          '@p': path.resolve(__dirname, './src/pages')
        } // 别名配置
      }
    })
  }
}

此时index.less文件中定义的变量方法......可以随意去使用了