安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader
npm i style-resources-loader vue-cli-plugin-style-resources-loader -D
中途要是有什么报错可能版本导致的
这个我测试的版本号,可以正常使用
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"echarts": "^5.4.0",
"less": "^4.1.3",
"less-loader": "^7.3.0",
"style-resources-loader": "^1.5.0",
"vue-cli-plugin-style-resources-loader": "^0.1.5",
"vue-template-compiler": "^2.6.14",
"vue-wxlogin": "^1.0.4"
},
vue.config.js
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
// publicPath: './', // 基本路径
publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
outputDir: 'dist', // 输出文件目录
lintOnSave: false, //关闭eslint
runtimeCompiler: true,
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
// 全局less变量存储路径
path.resolve(__dirname, './src/styles/var.less'),
]
}
}
}
配置完成后就可以不用在每个文件中单独引入less 了