使用 Nuxt create-nuxt-app ( https://nuxtjs.org/guide/installation#using-code-create-nuxt-app-code- ) 我选择 Vuetify 作为我的 UI。 (nuxt ^2 && Vuetify ^2)
Vuetify 的默认背景颜色为灰色。
我只是想把它改成白色。
说起来容易做起来难。
// nuxt.config.js
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
// my other color changes...
themes: {
light: {
primary: '#3EA0E1', // a color that is not in the default material colors palette
accent: '#82B1FF',
secondary: '#E7E7DE',
info: '#1976D2',
error: "#FF5252",
success: "#4CAF50",
warning: "#FFC107",
}
}
}
}
在变量.scss中
// /assets/variables.scss
@import '~vuetify/src/styles/styles.sass';
// change background to white..
$material-light: map-merge($material-light, ( background: '#fff'));
现在运行时:npm run dev它不会添加customVariables,显然仅在生产中。
关于https://github.com/nuxt-community/vuetify-module#treeShake明确指出它仅适用于生产。 那么如何开发以白色背景为例的应用程序呢? 我记得在以前的版本(1.5)中仍然使用手写笔,这不是问题。
如果它不会在开发模式下“treeshake”组件,但至少包含我的自定义 scss,我就很好。
有人有干净的解决方法吗?
最佳答案
如果您想在开发模式下使用树摇动,请在 vuetify 选项中显式添加 treeShake
选项。
在您的 nuxt.config.js
文件中,
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true,
theme: {
themes: {
light: {
primary: '#3EA0E1', // a color that is not in the default material colors palette
accent: '#82B1FF',
secondary: '#E7E7DE',
info: '#1976D2',
error: "#FF5252",
success: "#4CAF50",
warning: "#FFC107",
}
}
}
}
关于vuetify.js - Vuetify,Nuxt,在开发模式下使用树摇动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58201076/