loading...

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

frontend_io profile image Jefferson Osagie Iyobosa 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?

Discussion

pic
Editor guide
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 Author

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 Author

Lol. I completely understand.
Thanks

Collapse
rncrtr 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 Author

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