How do I prevent the css in home route from affecting the css in another route component
So i have "/" with multiple components and now i will create new route "/simmer".
The problem is the css of home route is affecting the component(s) in "/simmer", how do i prevent it?
any suggestions or best practices?
3 Replies
i have multiple imported components in home route. if i use "scoped", it does not work to that components
Ha!
Then you have to change the structure you're using for your css some how.
I'm not sure about forcing parent scoped css to work with child components, but I know other options are:
- Set the necessary styles for each child component within the vue file of that component and scope everywhere
- Use css modules (I think this was built for scoping)
- Attempt the native css scoping method ("Attempt" because I'm not sure of the compatibility level for browsers and even vue)
- Finally, just check that you're not using tags/ids for style selection and simply use different classes in the components on the other route. You can give it a name space like
.simmer_*. Eg. .simmer_header. That would effectively scope things