vue-cli配置全局sass、less变量的方法
一、全局配置less
1.下载插件
**vueaddstyle-resources-loader** vueaddpluginName是vue-cli3提供的。vueadd是用yarn安装插件的，yarn源的问题有可能导致失败。如果上面安装失败的话，就分别安装style-resources-loader和vue-cli-plugin-style-resources-loader（前提是已经安装过lessless-loader） //没有出错的话，可以无视这里 npmistyle-resources-loadervue-cli-plugin-style-resources-loader-D 或 yarnaddstyle-resources-loadervue-cli-plugin-style-resources-loader-D **
第二步配置vue.config.js
constpath=require("path");
module.exports={
...
pluginOptions:{
"style-resources-loader":{
preProcessor:"less",
patterns:[
//这个是加上自己的路径，
//注意：试过不能使用别名路径
path.resolve(__dirname,"./src/assets/variable.less")
]
}
}
...
}
或者使用官网的自动导入在chainWebpack中引入
https://cli.vuejs.org/zh/guid...
二、全局配置sass（直接配置vue.config.js）
注意：官网独爱sass，这种loader的形式只有sass才合适用，其他的（less、stylus）都会报错。
module.exports={
...
css:{
loaderOptions:{
sass:{
//@是src的别名
data:`
@import"@/assets/variable.scss";
`
}
}
}
...
}
总结
以上所述是小编给大家介绍的vue-cli配置全局sass、less变量的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短