如何访问 Vue 组件中的 Sass 变量？答案

【问题标题】：How do I access Sass variables inside a Vue component?如何访问 Vue 组件中的 Sass 变量？
【发布时间】：2016-03-31 03:57:43
【问题描述】：

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

【问题讨论】：

我不知道browserify。但是使用 webpack 你可以简单地使用这个加载器：github.com/shakacode/sass-resources-loader 并确保在你的 vue 文件中使用 <style lang="sass!sass-resources">

标签： sass vue.js laravel-elixir

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

.primaryColor {
 color: <variable here>
}

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

【讨论】：

【解决方案3】：

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

【讨论】：