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

Question

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

Answer 1

a discussion on the official vue-loader repo有完全相同的问题，归结为：不，你必须在需要它的每个.vue组件中导入变量文件。

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

Answer 2

你可以通过在顶级组件中导入它来归档它，通常称为<app></app>并使用css类公开它：

.primaryColor {
 color: <variable here>
}

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

Answer 3

并不总是适用，但是如果您将Vue用作Nuxt应用程序的一部分，则可以使用style-resources-module来实现。