无法覆盖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.xxx.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 / assets / stylus / variables.styl

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

src / assets / stylus / theme.styl

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

src / assets / stylus / app.styl

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

src / assets / stylus / 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>。

希望有帮助。