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安装失败，所以会报错。安装完重启就行了。
原文：https://www.cnblogs.com/qiemh/p/14701701.html