无法覆盖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.xxx.css文件中生成的Vuetify的原始缺省值获得ovewriten。

//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类：

// 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。然后使用$heading-font-family的值设置$headings散列。这意味着在您设置$body-font-family时，$heading-font-family已经设置为默认值。

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

您可以通过将其分解为几个文件来对其进行一些清理：

src/assets/stylus/variables.styl

//设置所有顶级变量$body-font-family = Arial $alert-font-size = 18px

src/assets/stylus/theme.styl

//设置所有嵌套变量$material-Dark.back= 'green‘

src/assets/stylus/app.styl

//覆盖CSS样式.display-2字体大小：$headings.h6.size！重要的字体系列：$headings.h3.font-系列！重要

src/assets/stylus/main.styl

//将@import 'variables‘@import’~vuetify/src/指示笔/设置/_variables‘@import’主题‘@import’~vuetify/src/指示笔/main‘@import 'app`放在一起

Answer 2

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

希望这能有所帮助。

Answer 3

例如，在Vuetify 2中，如果要覆盖background colour (nuxt js)：

1. Create .\assets\style\variables.scss

    @import '~vuetify/src/styles/styles.sass';

    $material-light: map-merge($material-light, (
            background: map-get($blue, 'lighten-5'),
            calendar: (background-color: red),
    )
    );

1. In nuxt.config.js add:

    buildModules: ['@nuxtjs/vuetify'],
    vuetify: {
        treeShake: true,
        customVariables: ['~/assets/style/variables.scss']
    }

更多信息：https://vuetifyjs.com/ru/customization/sass-variables