vue.js - 如何在组件 vue.js 中覆盖 SASS 变量 vuetify？

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，查看 Heads up from Sass看看为什么。

但是对于您的代码片段，您对 $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>