无法覆盖 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中不会引发错误，但会被Vuetify在app.xxx.css和块中生成的原始默认值覆盖-vendor.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。然后使用$heading-font-family 的值设置$headings 哈希。这意味着在您设置 $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

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

希望对您有所帮助。

Answer 3

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

1. 创建.\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. 在nuxt.config.js 添加：

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

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