search

nuxt-community / vuetify-module

Vuetify Module for Nuxt 2
Other
630 stars 106 forks source link

Using treeShake with nuxt-vite doesn't work #436

Open ctwhome opened 3 years ago

ctwhome commented 3 years ago

Vuetify doesn't work when using 'nuxt-vite' and treeShake to be able to modify the sass variables. Without nuxt-vite the app works perfectly image

mathe42 commented 3 years ago

vite uses rollup this module needs webpack for treeshaking.

Maybe my own module https://github.com/EC-Nordbund/vuetify-module works with vite (uses nuxt components module for treeshaking). I did not test that.

J-Sek commented 2 years ago

How do we force it to use variables.scss then?

dsschneidermann commented 2 years ago

vite uses rollup this module needs webpack for treeshaking.

Maybe my own module https://github.com/EC-Nordbund/vuetify-module works with vite (uses nuxt components module for treeshaking). I did not test that.

Can confirm that @mathe42's module works in-place of the vuetify module, for use with vite and treeShake: true. The startup time is significant but vite's hot module reloading works as fast as usual with both components and styles, and with a small delay (8 seconds for me) when changing the variables.

As an addendum to getting it fully working; I had to switch from 'scss' to 'sass' (presumably using the loader that works to merge the variables)

  vite: {
    // ...
    css: {
      preprocessorOptions: {
        sass: {
          additionalData: '\n@import "./assets/styles/variables.scss"\n',
        },
      },
    },
  },

And I had to configure the EC-Nordbund/vuetify-module to load all of the mdi icons, as such:

    iconFont: 'mdi',
    iconInjector: false, // Load full mdi-icon set, see https://github.com/EC-Nordbund/vuetify-module