vue-cli配置scss全局变量
问题
在vue-cli项目中的assets文件下建立全局样式表
global.scss
,在main.js中引入后可以直接引用样式,但无法在global.scss
中配置全局颜色变量
vue-cli在vue.config.js文件中配置scss全局变量
步骤
建立全局样式表global.scss
在vue-cli项目中的assets文件下建立全局样式表 global.scss
,用来保存全局样式和全局样式变量
创建vue.config.js
在项目根目录中创建文件vue.config.js,并在其中配置scss:
module.exports = {
css: {
loaderOptions: {
sass: {
//依次导入的公用的scss变量,公用的scss混入,共用的默认样式
prependData: `@import "./src/assets/global.scss";`,
},
},
},
}
重启服务
然后重启服务器 npm run serve
(注意你一旦修改了 vue.config.js
文件 就要重启服务器 因为你改了配置文件 它加载的是修改之前的)
之后我们设置全局颜色变量直接在 global.scss
文件中修改就可以了
最后
注意,配置中可能会碰到缺失 ;
错误,详细则可参考此篇博客 vue sass配置全局变量报错
所参考的原文献的地址为:
vue脚手架在vue.config.js文件中配置scss全局变量