vue/cli4x配置less

1. 首先安装less、less-loader

npm i less-loader less --save-dev 

2. 在vue.config.js中进行配置

module.exports = {
   // 第三方插件配置
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            // less所在文件路径
            patterns: [path.resolve(__dirname, './src/assets/css/base.less')] 
        }
    },  
}    

3. 在vue文件中的style标签上增加lang="less"测试

4. 如果有未知的报错，例如vue-style0loader中的或者其他未知错误，看看less-loader版本是不是过高导致webpack不兼容less-loader，vue/cli4x时依赖的webpack版本为4x

// node_modules/vue/package.json
"@types/webpack": "^4.4.22",

// package.json
"less-loader": "^5.0.0",

webpack可以兼容less-loader5.0版本

5. 如果需要定义全局变量，需要安装style-resources-loader

npm i style-resources-loader --save-dev 

如果安装这个加载器后报错，或者找不到这个加载器，那么可以重新安装一下

npm install style-resources-loader vue-cli-plugin-style-resources-loader -D

正常来说，安装style-resources-loader时，vue-cli-plugin-style-resources-loader应该会一起安装了，不过有时候特殊原因导致vue-cli-plugin-style-resources-loader安装失败，所以会报错。安装完重启就行了。