Question

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

这不起作用：（

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

有没有一个可行的例子？

Answer 1

通过阅读我正面临着同样的问题，对萨斯来说是很新的
sass doc：https://sass-lang.com/documentation/variables
证明：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;
}
}

需要放！重要；最后覆盖默认的vuetify编译的CSS。

选项2，编写/src/sass/variables.scss，在进行webpack编译时，它将自动拾取文件，因此您可以以适当的方式覆盖全局设置，但是看起来代码中的任何更改都将重新编译所有样式，每次编译和构建都花了很长时间

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

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

Answer 2

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

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

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

在vuetify中覆盖$ container-max-widths

2 个答案: