Describe the bug
After setting the 'important' option to '#app' in 'windi.config.ts', using '@apply' while using the top layer ':deep' in the '.vue' file causes scoped style compilation error
The text color of 'this content in comp' should be 'text-blue-400', but it is actually black now
Screenshots
Additional context
Because 'transformTemplateLoader' executes before 'stylePostLoader', the selector prefix configured for 'important' is added to the style early, causing a compilation error.
<style scoped>
// There should be a space between `#app` and `[data-v-7ba5bd90]`
#app [data-v-7ba5bd90] .class-in-child-comp {
--tw-text-opacity: 1;
color: rgba(96, 165, 250, var(--tw-text-opacity));
}
</style>
Describe the bug After setting the 'important' option to '#app' in 'windi.config.ts', using '@apply' while using the top layer ':deep' in the '.vue' file causes scoped style compilation error
To Reproduce Steps to reproduce the behavior:
Screenshots
Additional context
Because 'transformTemplateLoader' executes before 'stylePostLoader', the selector prefix configured for 'important' is added to the style early, causing a compilation error.
Incorrect compilation process
The
transformTemplateLoader
transforms it intoThen the
stylePostLoader
ofvue-loader
is converted to thisIt should actually compile like this