vue-cli4配置scss全局变量

更新时间: 2020-10-17 22:41:33

最近写自己的博客,打算使用scss,但是使用scss的时候不想每个组件都引入variable.scss,于是网上找了好多方法,此为亲测可用的方法

  1. 安装“node-sass”“sass-loader”“style-loader”
  2. vue.config.js配置
module.exports = {
  css: {
    // css预设器配置项
    loaderOptions: {
		sass: {
		  additionalData:`@import "./src/style/varible.scss";`
		}
	}
  },
}
1
2
3
4
5
6
7
8
9
10
  1. 然后就可以在组件里随便用了
<style lang="scss" scoped>
#app{
 background: $background;
}
</style>
1
2
3
4
5

改天还是得好好研究研究这些配置呀,感觉能做挺多事的