Code splitting styling issues
Hey everyone, I have styling issues when doing code splitting with webpack. Im using Vue with CSS Modules for scoped styles.
I have reusable component ButtonEl, which is in multiple css bundles, and this override Im doing is in first bundle, ,,,, however, later ButtonEl styles from another bundle override those specific styles, just based on being evaluated later.
I know I can use some tricks to increase specificity, but I would rather solve this in a centralized manner, if possible.
I see 2 possible solutions:
1. Css Modules hash to be different for each instance of
ButtonEl, but dunno if that is even possible to do?
2. Some webpack solution with splitChunks?
Anyone can help with this?4 Replies
Why don't you have both styles in different components or in the same one, rather than overriding the style later on?
Not sure what you mean, but I usually have a need to override styles of the component from a parent. And it works in normal kind of setup, but with this issue it would not work.
hum, weird, can you share the repo ?
it would make it easier to find what is wrong
a reusable component ButtonEl suggests to me that there would be almost no styling present on it.
typically you would have your base button styles i.e.
.btn {... styles}
then if you have common styles for cta's, primary, secondary, cancel buttons etc. you would have
.btn.cta {...cta styles} .btn.primary {...primary styles} .btn.secondary {...secondary styles} etc.
this should allow for variants that would be used throughout your app.
css modules specifically allow you to extract the css class when you import the file which is then used in the element.
if you dont have logic enabled in the custom button element to handle the variants when it receives a specific prop, then you should be able to atleast import the specific styling through the class.
I am unsure why you have to over ride the styles and I think this is only going to cause nightmares for maintaining it
perhaps with code as suggested by @Rägnar O'ock it would be possible for someone to help. But I think the app needs a bit of a spring clean by the sounds of things