Why does angular seem to ruin my CSS immediately it's on a live server?

twitter logo github logo Updated on ・1 min read

This is seriously not funny. Spending hours writing styles only to deploy and see your styling ruined. Has anyone come across this? What could be the problem and how did you fix it?

twitter logo DISCUSS (6)
markdown guide
 

what would be the definition of ruined? I mean what exactly happened?

Usually during development you have your scoped component css rules and your main style of the app.

Was something not copied to the server or does it not use the same directory?

Maybe the base href should be set to "./" if you want your app to be accessed from a sub folder

 

Okay, what I meant is.
Some or the styles act weired, like there's some style somewhere overriding my set styles. All folders are accessible and the styles are loaded, but they display differently.

 

hmm the only weird css issues on production I had, were some production-only added classes (to elements) - which then created some unexpected styles, but once I had those fixed nothing really broke again

so it really depends on case-by-case

also don't forget:
CSS

 

Ruined how? Is it possible you have references to a url that is now different on the server? Maybe you need to add a dot slash before folders in paths? These are things I've run into before.

 

Thanks. It's been fixed anyway. Discovered it was only happening on my company's server. And it's still Angular 4 up there..... 😵😫😵

Classic DEV Post from Nov 22

What Status Page Provider or Project Do You Recommend?

What status page provider or project do you recommend?

Jefferson Osagie Iyobosa profile image
Passionate front-end developer looking forward to learning more