如何覆盖<v-container>

Question

我已经配置了 Sass 变量来覆盖 Vuetify 的

<v-container>

的最大宽度，如下所示：

@use 'vuetify/lib/styles/main.sass' with (
  $body-font-family: $body-font-family,
  $container-max-widths: (
    'md': '1190px',
    'lg': '1190px',
    'xl': '1190px',
    'xxl': '1190px',
  )
);

https://github.com/newyee/nuxt-site/blob/main/assets/main.scss

但是，目前max-width没有被应用，宽度超过1190px。当前状态可以在这里看到：

https://document-driven-demo.netlify.app/ja/getting-started/introduction/

完整的应用程序代码可以在这里找到：

https://github.com/newyee/nuxt-site/tree/main

我正在寻求建议，因为我无法确定问题的原因。

Answer 1

进入您的 nuxtConfig，使用

styles.configFile

选项配置 vuetify as

    vuetify({
      autoImport: true,
      styles: {
        configFile: "src/styles/settings.scss"
      }
    }),

并覆盖

src/styles/settings.scss

中的 vuetify 样式变量

@use "vuetify/settings" with (
  $body-font-family: "Comic Sans",

    $button-height: 80px,
    $container-max-widths: (
    'md': '1190px',
    'lg': '1190px',
    'xl': '1190px',
    'xxl': '1190px',
  )
);

注意：Vuetify 应该位于

3.3.1

上方。 问题

参考：请参阅

Style Loading

部分https://www.npmjs.com/package/vite-plugin-vuetify