Add option to wrap vuetify components in CSS Cascade Layer

[nmarshall23]

While we are waiting for vuetify to implement CSS Cascade Layers. See 15596

It would be trivia to add this when using the styles config File option.

Just need to replace:

`@use "${configFile}"\n@use "${target}"`

With:

`@use 'sass:meta';\n @use "${configFile};\n @layer framework {\n @include meta.load-css("${target}");\n }\n`

I didn't find any down sides to loading using meta.load-css.

The end user needs to set their Cascade Layers in main.scss like this:

@layer framework, component, util;

thoughts?

[leonceaklin]

Just found this issue by googling "vuetify styles inside cascade layer". This would solve all the problems we have with overriding Vuetify's !important rules!

[ananthachetan]

@nmarshall23 Would you please tell where should we

While we are waiting for vuetify to implement CSS Cascade Layers. See 15596

It would be trivia to add this when using the styles config File option.

Just need to replace:

`@use "${configFile}"\n@use "${target}"`

With:

`@use 'sass:meta';\n @use "${configFile};\n @layer framework {\n @include meta.load-css("${target}");\n }\n`

I didn't find any down sides to loading using meta.load-css.

The end user needs to set their Cascade Layers in main.scss like this:

@layer framework, component, util;

thoughts?

Would you please explain where and how do we need to make this change? I did not completely understand this.

[nmarshall23]

For the vite plugin change
stylesPlugin.ts

It would end up looking like

@use 'sass:meta';
@use "${configFile};
@layer framework {
   @include meta.load-css("${target}");
}

[KaelWD]

We're moving the entire thing over to layers anyway in a couple of months, not worth having a half-assed version here.