如何在Vue组件中访问Sass变量？

Question

我正在使用Vueify和Laravel/Elixir.我在我的Post.vue文件中使用Sass 但它引用了我声明的颜色@import "resources/assets/sass/bootstrap-variables-override.scss";是否有办法不必在.vue我生成的每个组件中包含该行？

Answer 1

有官方VUE装载机回购的讨论具有完全相同的问题，并把它归结为：不，你必须输入变量文件中的每个.vue组件需要它。

为了稍微简化这种情况，您可以做的一件事是将包含变量文件的文件夹添加到包含路径中，这样您就可以不必@import "my-variables.scss";每次都指定整个路径。

Answer 2

您可以通过将其导入顶级组件来存档它，通常<app></app>使用 css 类调用并公开它：

.primaryColor {
 color: <variable here>
}

然后你就可以在每个子组件中访问该类