Strangest bug I have ever seen

I have run into a strange issue, after copying the CSS styles given by my designer when I open my application it doesn’t render properly. The same CSS styles are working fine with static files but when I implement them on my Meteor app they don’t look the same as they look with the static files.

A strange thing I noticed is that on my development environment, the first time the app loads it loads with distorted styles but if I change anything in my CSS and save it while the app is running then the styles get corrected and they look like as they look on the static files. The design is based on Bootstrap. I have tried to debug this but unable to solve it I am posting this here for help. Thanks in advance.

There might be conflicting selectors i.e. same selectors from different css files.

But the same CSS works fine with static HTML files, and the moment I make even a smallest change in my CSS while the app is running, the hot reload makes the CSS work as they should.

Meteor has a different way of prioritizing multiple css files. So if there are multiple css files, there can be conflicts. If you don’t have multiple css files, then disregard it

Earlier there were different CSS files but when I integrated the front-end with my app, I made only one CSS files which has all the styles. Are there any docs or articles on which I can read about how Meteor handles CSS?