在 vuetify 中覆盖 $container-max-widths答案

【问题标题】：Override $container-max-widths in vuetify在 vuetify 中覆盖 $container-max-widths
【发布时间】：2020-03-21 22:37:00
【问题描述】：

我不会覆盖容器最大宽度的默认行为。

这不起作用:(

$container-max-widths: (
    'lg': 748px,
    'xl': 1440px
);

有谁有一个可行的例子吗？

【问题讨论】：

标签： vuetify.js nuxt.js

【解决方案1】：

通过阅读，我面临同样的问题并且对 sass 非常陌生
sass 文档：https://sass-lang.com/documentation/variables
vuetify：https://vuetifyjs.com/en/customization/sass-variables

以下 2 个设置适合我，第一个选项需要放在最后，第二个选项不需要，但编译时间很长。

选项 1，添加单独的 scss ，它不是覆盖 vuetify sass 变量，但您可以阅读它们，并应用您自己的逻辑
添加 src/styles/index.scss ，在你的代码中导入你需要的文件

@import '~vuetify/src/styles/styles.sass';
@media only screen and (min-width: map-get($grid-breakpoints, 'lg')) {
.container {
max-width: 748px !important;
}
}

@media only screen and (min-width: map-get($grid-breakpoints, 'xl')) {
.container {
max-width: 1440px !important;
}
}

需要放 !important;到最后覆盖默认的 vuetify 编译的 css。

选项2，写/src/sass/variables.scss，当webpack编译时，它会自动拾取文件，所以你可以以适当的方式覆盖全局设置，但看起来代码中的任何变化都会重新编译所有样式，每次编译构建都需要很长时间

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

$container-max-widths: (
    'lg': 748px,
    'xl': 1440px
);

【讨论】：

【解决方案2】：

就我而言，我所做的只是在 assets/variable.css 中添加 css 代码

$container-max-widths: (
    'lg': 748px,
    'xl': 1440px
);

然后在nuxt.config.jsvuetify配置中添加treeShake: true,

我的nuxt.config.js 看起来像这样：

export default {
    ...

    vuetify: {
        customVariables: ["~/assets/variables.scss"],
        treeShake: true, // <-- add this line
    },
    ...
};

【讨论】：

谢谢，这行得通。为什么我们需要使用 treeShake 才能使其工作？

【解决方案3】：

此答案与上述答案相似。这是一个补充。也许是更方便的方法

@import '~vuetify/src/styles/settings/variables';

@media #{map-get($display-breakpoints, 'xl-only')} {
    .container {
        max-width: 1540px !important;
    }
}

【讨论】：