无法覆盖vuetify中的样式

Question

如何在vuetify中覆盖实际的类？

我创建了一个./src/stylus/main.styl文件，我在其中覆盖了一些当前的vuetify设置作为测试：

@import '~vuetify/src/stylus/settings/_variables'
@import '~vuetify/src/stylus/elements/_typography'





$material-dark.background = green
$body-font-family = Arial
$alert-font-size = 18px

.display-2
  font-size: $headings.h6.size !important
  font-family: $headings.h3.font-family !important


@import '~vuetify/src/stylus/main'

由于某种原因，上述值仅部分起作用。分配给$material-dark.background和$body-font-family的新值适用于theme--dark下的任何内容，但是当涉及到.display-2时，这些值仍然会调用font-size和font-family的原始设置并覆盖我添加到main.styl中的值。我甚至尝试进入包含.display-2的组件，首先在手写笔中作为范围语言然后在普通的css中不起作用，它不会抛出错误但是会被app.xx.css和chunk-vendor中生成的Vuetify的原始默认值所覆盖。 .xxx.css文件。

//component
<style scoped>
h1.display-2{
  font-size:20px;
  font-family: "Times New Roman";
  color:green;
}

</style>

是否有一个原因？

Answer 1

在导入_variables.styl之前需要设置一些变量，因为它们用于设置该文件中的其他变量。这是因为Vuetify在手写笔文件中使用条件赋值（:=）。

最安全的方法是在导入任何其他文件之前设置所有顶级变量。

// set these variables before Vuetify does
$body-font-family = Arial
$alert-font-size = 18px

然后，导入_variables.styl以便您可以覆盖嵌套值：

@import '~vuetify/src/stylus/settings/_variables'

// now that the $material-dark hash exists, set the background
$material-dark.background = 'green'

然后，导入main.styl以创建Vuetify CSS类：

// import main to set all styles
@import '~vuetify/src/stylus/main'

// override the CSS classes using stylus variables
.display-2
  font-size: $headings.h6.size !important
  font-family: $headings.h3.font-family !important

Vuetify在手写笔文件中使用条件赋值运算符。因此，如果您在@import之前设置变量，它将在@import之后保留。这很重要，因为_variables.styl在内部引用这些变量。

特别是在这种情况下，$heading-font-family := $body-font-family。然后使用$headings的值设置$heading-font-family哈希。这意味着当您设置$body-font-family时，$heading-font-family已经设置为默认值。

.display-2样式的覆盖不起作用，因为它还不存在。因此，当您导入main.styl时，它将被设置回默认值。

你可以将它分成几个文件来清理它：

SRC /资产/笔/ variables.styl

// set all top-level variables
$body-font-family = Arial
$alert-font-size = 18px

SRC /资产/笔/ theme.styl

// set all nested variables
$material-dark.background = 'green'

SRC /资产/笔/ app.styl

// override CSS styles
.display-2
  font-size: $headings.h6.size !important
  font-family: $headings.h3.font-family !important

SRC /资产/笔/ main.styl

// pull it all together
@import 'variables'
@import '~vuetify/src/stylus/settings/_variables'
@import 'theme'
@import '~vuetify/src/stylus/main'
@import 'app`

Answer 2

我和你有同样的问题，解决这个问题的方法是从scoped标签中删除<style>属性。

希望有所帮助。