vue官方提供了两种方法
1.style-resources-loader
2.vue-cli-plugin-style-resources-loader
使用第一种方法自己通过npm安装经常会出现报错:
TypeError: Cannot read property 'style-resources-loader' of undefined
或者 variable xxx is undefined
所以,删除style-resources-loader(虽然vue-cli-plugin的插件还是会安装这个),我们直接用第二种方法通过vue add来安装:
1.安装:vue add style-resources-loader
2.选择相应的预处理器
3.vue.config.js中配置pluginOptions
const path = require("path")
module.exports = {
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: [
path.resolve(__dirname, "./src/assets/css/common/varible.less"),
], // 引入全局样式变量
},
},
}
css自动化导入文件不止用于变量,还可用于颜色、变量、mixin等,详情CSS 相关 | Vue CLI