如何覆盖单个 vue.js 组件的 vuetify SASS 变量？

Question

我可以覆盖所有项目的 sass 变量。我在文件里做的src/sass/variables.scss。在此之前我创建了sass文件夹和该文件。正如我所说，它有效，我可以覆盖整个项目中该文件中的变量。但我只需要重写组件的必要变量。我尝试这样做：

<style lang="sass">
  $btn-text-transform: lowercase         //by default uppercase
</style>

@import '~vuetify/src/components/VBtn/_variables.scss'我也尝试在变量之前或之后添加。但这不起作用。我究竟做错了什么？我该怎么做？

Answer 1

首先，为每个组件导入这些全局样式可能不是一个好主意。每次您@import将 vuetify 的样式表添加到生成的代码中。实际上，@import通常不鼓励使用，请查看Sass 的 Heads up以了解原因。

但是，按照您的代码片段，您的覆盖$btn-text-transform无法工作，因为您正在!default作业中使用。它不会分配该值，因为该值已在导入的样式表中分配。

所以摆脱!default. 如果仅此方法不起作用，请将$btn-text-transform声明移至@import.

编辑 18-08-21如何在组件中覆盖 SASS 变量 vuetify：

您只能在使用这些变量导入样式表的地方覆盖 Sass 变量。如果你例如。导入（直接或传递）~vuetify/src/components/VBtn/_variables.scss到您的全局样式表，然后在您想要更改的组件（单独的样式表）中$btn-text-transform，它将不起作用。

这是因为 Sass 变量的工作方式 - 它们仅存在于编译时。事实上，组件样式的编译范围与全局样式表是分开的（如果我们使用上面的示例），这意味着更改，实际上在$btn-text-transform组件样式中声明新样式不会对全局样式表的编译产生影响。在组件的样式开始编译之前，编译可能已经完成。

如果您将 VBtn 样式导入到组件中，您的方法将会起作用，如下所示：

@import "~vuetify/src/components/VBtn/_variables.scss";

$btn-text-transform: [your-own-value];

@import "~vuetify/src/components/VBtn/VBtn.sass";

理想情况下，您不会在其他任何地方导入 VBtn 样式。如果你这样做了，例如。在某些全局样式表中，会存在样式重复，这意味着应用哪些样式的可预测性较差，并且需要发送到客户端的字节数更多。

但这可能太匆忙了。本地自定义样式的最简单方法是全局导入您需要的所有 vuetify 样式，然后在组件中应用您自己的、范围内的样式更改。谈论text-transform您想要更改的内容，您可以在组件的样式中使用它：

<style scoped>
/deep/ .v-btn {
  text-transform: [your-own-value];
}
</style>