CSS style : dev vs prod

[pascalgrimaud]

The CSS style is completely different when using in dev and in prod profile.
It seems because the custom css is not used at all in prod and the boostrap one override our custom style.

[pascalgrimaud]

I think I'm not clear enough. I'll provider later more information to reproduce here

[atomfrede]

You mean the white and grey parts or something more severe?

PROD:

DEV:

[pascalgrimaud]

yes very minor here but there is a PR in jhipster control center, which uses Vue.js and the custom css is not used in prod.

And I saw the same for my gateway with vue.js for my current customer, with bootswatch

[atomfrede]

So dev is correct, right?

[pascalgrimaud]

I'll provide a screennshot as soon as possible :)
I don't know which one is the correct one. I think it's dev, yes

[atomfrede]

At least I think it looks "better" :)

[pascalgrimaud]

[pascalgrimaud]

Using this diff, solves the problem:

diff --git a/src/main/webapp/content/scss/vendor.scss b/src/main/webapp/content/scss/vendor.scss
index 560f820..df40ab7 100644
--- a/src/main/webapp/content/scss/vendor.scss
+++ b/src/main/webapp/content/scss/vendor.scss
@@ -10,5 +10,6 @@ eg $input-color: red;
 @import '~bootstrap/scss/bootstrap';
 @import '~bootstrap-vue/src/index.scss';
 @import '~bootswatch/dist/spacelab/bootswatch';
+@import 'global.scss';

@atomfrede : do you think it's the correct fix ?

[atomfrede]

I looks strange imho. Don't we have a vendor and app.css file in the end? If you add global.css also to vendor it will be delivered twice I think. Once as part of vendor.css and as main.css

[pascalgrimaud]

yes probably, but to be honest, I sux in CSS... I couldn't help much here lol

[atomfrede]

Try to set the chunkSortMode to manual also in webpack.prod.

chunksSortMode: 'manual',

[pascalgrimaud]

I think it works @atomfrede ! Thanks a lot

Our JHipster Control Center doesn't contain all new updates from Vue.js blueprint
See https://github.com/jhipster/jhipster-control-center/blob/master/webpack/webpack.prod.js#L71-L81

[pascalgrimaud]

With your suggestion, our sidebar menu in JHipster Control Center works well -> jhipster/jhipster-control-center#56

[atomfrede]

Seen the screenshot in the other pr. Looks really cool. Looking forward to the final result. I can provide a pr for the blueprint with the fix.