使用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",
}
}
}
}
in variables.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)中仍使用手写笔,这不是问题。
如果没有在开发人员模式下“摇晃”组件,但至少包括我的自定义scs,我很好。
任何人都可以使用的替代方法?
如果要在开发人员模式下使用摇树,请在[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",
}
}
}
}