Darshan Darshan - 29 days ago 8
CSS Question

Ember-cli build production gives errors unless style.css altered

I've got a very weird issue with my Ember application. I have a style.css file that is (unfortunately) 4030 lines long due to circumstances I cannot change at the moment. It is included in my app/index.html file like so

<link rel="stylesheet" href="assets/style.css">


When I run ember build --prod on my ember app, I get the error: "Ember is not defined". Now here's the strange part: if I copy about 100 lines from the end of the style.css and then paste it to the beginning of the style.css file, then building to production has no problem, and the completed build runs perfectly. Of course, this practice of shuffling around the style.css cannot be continued for long, and therefore I need to find a solution - or at least the cause of this.

I'm asking if anyone has experienced this problem, and if so, what was done to fix it.

Answer

So. After researching and trial and error, I've found that the reason this was a problem was because I named my main css file 'style.css', which is a very common name for a .css file. One of my vendor packages (still don't know which one) had a .css file also called style.css, and during compilation, the vendor .css and my app's .css clashed with each other.

Changed the name to 'myCompany_style.css' and everything works fine. Also as per @kumkanillam's suggestion, moved all css compilation to app.css

Will edit answer to include issue link if I can re-find it.