vue cli 3 自動化導入less配置

像variable.less、mixin.less須要全局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. 重啓項目