search

vuetifyjs / vue-cli-plugins

🔌 A collection of Vuetify plugins for Vue CLI
https://vuetifyjs.com/en/getting-started/quick-start#vue-cli-3
Other
427 stars 113 forks source link

Prefer/Allow @forward over @import for style-loader injection #301

Closed sbarfurth closed 2 years ago

sbarfurth commented 2 years ago

The vue-cli-plugin-vuetify injects two import statements into the style loader at build time. One for the custom variables in certain folders and one for base vuetify settings and utilities. This is convenient, but sadly these statements are hard-coded in the helpers file.

As the statements are prepended to files they take away the ability to use @use in your own styles. This is because they effectively start with @import and thus @use is not longer usable.

The solution seems to simply be using @forward over @import or to make this configurable. Is there any workaround I can use? I would like to rid myself of import statements. Maybe there could be an option to disable injecting styles?

KaelWD commented 2 years ago

I don't know if it's possible to do that reliably. We tried it in v2.5.2 but caused a lot of problems and had to be reverted. In vuetify 3 we've switched away from @import internally and have a new way of loading variables that doesn't use prependData at all.

sbarfurth commented 2 years ago

Hm that's unfortunate. I guess I will need to try something without the cli-plugin or override styles instead of changing variables. Bummer.

sbarfurth commented 2 years ago

I've reverted to using @import now. I couldn't find a way to make it work even manually. I'm afraid I'll be missing out on all the nice quality of life improvements with the next version since Vue 3 really isn't on the table any time soon sadly. Thanks for the quick reply anyway.