How to implement guide with css custom properties not applying correctly in nested components using vue 3
I'm working through a tutorial and This might be a silly question, but I'm experiencing an scenario where CSS custom properties (variables) defined in a parent component are not being recognized in nested child components in my Vue 3 application. For instance, I have the following setup: In my parent component's CSS: ```css :root { --main-bg-color: #3498db; } .parent { background-color: var(--main-bg-color); } ``` And in my child component's CSS: ```css .child { background-color: var(--main-bg-color); color: white; } ``` When I inspect the child component, the `background-color` is not applied, and I don't see any behavior messages in the console. I've tried using `scoped` styles in the child component, thinking it might be an scenario with global styles, but it didn't resolve the question. I also confirmed that my Vue version is 3.2.0. What could be causing the child component to not access the CSS custom properties defined in the parent? I've also checked for specificity issues, but that doesn't seem to be the case. Any insights or workarounds would be greatly appreciated! I'm working on a application that needs to handle this. Thanks for any help you can provide! This issue appeared after updating to Css 3.9. How would you solve this?