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时，这些值仍为{{1 }}和font-size，并覆盖我添加到main.styl中的内容。我什至尝试首先在手写笔中进入包含font-family的组件作为作用域语言，然后在普通的CSS中不起作用，而普通的CSS不会抛出错误，但是会被app.xxx.css中生成的Vuetify原始默认值覆盖和chunk-vendor.xxx.css文件。

.display-2

这有原因吗？

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

例如，在Vuetify 2中，如果要ro覆盖background colour（nuxt js）：

创建.\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),
    )
    );

在nuxt.config.js中添加：

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

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

Answer 3

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

希望有帮助。

无法覆盖Vuetify中的样式

3 个答案: