DEV Community

Jefferson Osagie Iyobosa
Jefferson Osagie Iyobosa

Posted on • Edited on

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

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?

Top comments (6)

Collapse
 
negue profile image
negue

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

Collapse
 
frontend_io profile image
Jefferson Osagie Iyobosa

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.

Collapse
 
negue profile image
negue

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

Thread Thread
 
frontend_io profile image
Jefferson Osagie Iyobosa

Lol. I completely understand.
Thanks

Collapse
 
sym profile image
Ryan Carter

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.

Collapse
 
frontend_io profile image
Jefferson Osagie Iyobosa

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