Vuetify，Nuxt，在开发模式下使用摇树

Posted 2023-02-22

【中文标题】Vuetify，Nuxt，在开发模式下使用摇树

【英文标题】：Vuetify,Nuxt , use tree shaking in Dev mode

【发布时间】：2020-01-31 16:58:15

【问题描述】：

使用 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）中仍然使用手写笔，这不是问题。

如果它不在开发模式下“摇树”组件，我很好，但至少包括我的自定义 scss。

任何人都有一个干净的解决方法？

【参考方案1】：

如果您想在开发模式下使用摇树，请在 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",