vue.js - 如何在全局引入scss的变量声明

问题描述

问 题

因为想要避免<style> 标签下使用相对路径单独引入scss文件, 在main.js中引入color.scss的文件

import 'assets/scss/color.scss';

但是在组件中的style标签下找不到$red定义。

<style lang="scss" scoped>

.login {
  background-color: $red;
}
</style>

我现在只能在style标签下引用系统目录的相对路径，但这个样会导致不同层级的vue文件的相对路径不统一

<style lang="scss" scoped>
@import '../assets/scss/color.scss';
.login {
  background-color: $red;
}
</style>

有人知道如何在全局引入scss的变量定义吗？

解决方案

此方法仅用于Vue.js2.0及以上版本,假设你的全局变量和Mixin存储在src/assets/scss/color.scss里。

打开 build/utils.js 文件

将

scss: generateLoaders(['css', 'sass']),

替换为

 scss: generateLoaders(['css', 'sass?data=@import "~assets/scss/color";']),

重新运行 npm run dev 即可在Vue文件里使用全局变量了。

这篇关于vue.js - 如何在全局引入scss的变量声明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！