vue cli 3 自动化导入less配置

像variable.less、mixin.less需要全局less文件使用，每次导入一次比较烦。

更简单的配置方法

1. vue add style-resources-loader插件方式安装style-resources-loader。选择less
2. 修改vue.config.js

   const path = require('path')
   const resolve = dir => {
     return path.join(__dirname, dir)
   }
   module.exports = {
       // ...
       pluginOptions: {
           'style-resources-loader': {
             preProcessor: 'less',
             patterns: [
               resolve('path/to/global.less')
             ]
           }
       }
   }
   

老的

参考vue cli 3 文档中的stylus设置全局导入。

1. npm i style-resources-loader -D
2. 修改vue.config.js

// vue.config.js
const path = require('path')

module.exports = {
    chainWebpack: config => {
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
    },
    css: {
      loaderOptions: {
        less: {
          javascriptEnabled: true
        }
      }
    }
}

function addStyleResource(rule) {
    rule.use('style-resource')
        .loader('style-resources-loader')
        .options({
            patterns: [
                path.resolve(__dirname, 'src/styles/variable.less'), // 需要全局导入的less
                path.resolve(__dirname, 'src/styles/mixin.less'),
            ],
        })
}

3. 重启项目