core icon indicating copy to clipboard operation
core copied to clipboard

CSS @import doesn't work inside :deep()

Open MeesterDev opened this issue 1 year ago • 0 comments

Vue version

3.4.31

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-9ygjdp?file=src%2Fassets%2Fbase.css,src%2Fassets%2Fbase2.css,src%2Fcomponents%2FTestOne.vue,src%2Fcomponents%2FTestTwo.vue,src%2FApp.vue,src%2Fmain.js&terminal=dev

Steps to reproduce

Import a style within a :deep (or :global), using @import.

In the reproduction link, you'll see two components. Both components use v-html. In our actual use case, this is HTML from an external system, rather than static text. We want to apply styling rules to the HTML, without affecting components/elements outside of the container. The two example components do not work, in one case the @import results in an @import in the browser, pointing to an invalid path, in the other case, the styling is global (well that's actually correct, but that's not what we want).

What is expected?

@import behaves the same, regardless of where it's placed (e.g. the @import is replaced with the content of the file).

What is actually happening?

The style is not imported.

MeesterDev avatar Jul 02 '24 11:07 MeesterDev