Vuetify,Nuxt,在开发人员模式下使用摇树

时间:2019-10-02 12:00:48

标签: vuetify.js nuxt

使用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",
            }
          }
        }
      }

在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)中仍使用手写笔,这不是问题。

如果它没有在开发人员模式下“摇晃”组件,但至少包括我的自定义scss,就可以了。

有人干净的解决方法吗?

1 个答案:

答案 0 :(得分:0)

如果要在开发人员模式下使用摇树,请在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",
      }
    }
  }
}