Generator-jhipster: The order of global and vendor scss files is incorrect in angular.json

Created on 18 Nov 2020 · 8Comments · Source: jhipster/generator-jhipster

The sequence of imports should have been vendor.scss followed by global.scss. The styles defined in global.scss are being overridden by the default.

https://github.com/jhipster/generator-jhipster/blob/ecab1c56f1f1c5f4374328b1d789d13689f3b0a7/generators/client/templates/angular/angular.json.ejs#L49

Sorry if the description is succinct, the issue is also simple.

area angular

Source

packums

All 8 comments

I confirm this issue, thanks for reporting @packums
Would you like to do a PR for fix?

kaidohallik on 19 Nov 2020

Thanks for addressing this so quickly, however I noticed that angular-cli messes up the order of styles declared during the production build ng build --prod. To state it differently, dev mode (ng serve) works fine after this fix but production build has incorrect sequence. This is possibly caused by this issue https://github.com/angular/angular-cli/issues/9475 . I am using angular client version 10.0.7 in local.

One of the workarounds suggested in the angular-cli ticket is to import vendor.scss into global.scss, and remove vendor.scss from the angular.json. I tested this, and seems to work.

packums on 21 Nov 2020

I confirm that in current main branch styles order is correct in dev but wrong in prod, so reopening.

kaidohallik on 22 Nov 2020

@kaidohallik can you try with @angular-builders@11?
it should be fixed at @angular/cli@11 but we are effectively using @angular/cli@10.

mshima on 22 Nov 2020

I tried with @angular-builders@11 and with this it's not working not in dev nor in prod.
But then I deleted vendor.ts file which refers to vendor.css (it means vendor.css is referenced twice in our application) and all is working fine after that.

So to fix this my suggestion is:

as @angular-builders@10 and @angular-builders@11 are acting differently then upgrade to 11.0.0-beta.1 and focus on this and don't waste time to v10
delete vendor.ts and modify or remove vendor section in README.md (I don't think we should hold empty vendor.ts file for possible additional dependencies, those dependencies can be imported directly in application, every library has it's own how to use instructions)