覆盖vuetify中的$ container-max-widths

Question

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

这不起作用：（

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

有没有一个可行的例子？

Answer 1

通过阅读，我面临着同样的问题，对萨斯来说很陌生骚扰文档：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
);