Vuetify浅色主题下如何通过Stylus变量修改主内容背景色

我之前也踩过这个变量的坑，你找错控制主内容背景的变量啦！下面给你正确的解决方法：

正确的Stylus变量 #

Vuetify Light主题下，控制主内容区域（比如v-content组件）背景色的变量是$background-light，不是你尝试的那两个。

具体操作步骤 #

在你的main.styl文件中，必须在导入Vuetify样式前定义这个变量，顺序不对的话自定义设置不会生效。示例代码如下：

// 先声明自定义变量
$body-font-family = 'Open Sans'
$background-light = #fff

// 再导入Vuetify的核心样式
@import '~vuetify/src/stylus/main'

为什么之前的尝试无效？ #

• $body-bg-light：这个变量控制的是<body>标签的背景色，而Vuetify的主内容区域是由专门的$background-light变量控制，所以修改它不会改变内容区的背景。
• $material-light.background：这个写法有误，Vuetify的主题变量体系里，Light主题的背景变量是独立的$background-light，不需要通过$material-light对象来赋值，所以会报错。

修改完成后重启你的Webpack构建，就能看到主内容背景变成纯白色啦！

内容的提问来源于stack exchange，提问作者Cindy Conway