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

Posted 2023-03-06

【中文标题】如何访问 Vue 组件中的 Sass 变量？

【英文标题】：How do I access Sass variables inside a Vue component?

【发布时间】：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">

【参考方案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 来实现此目的。