How to add custom js and css files in jHipster 4

Question

As I'm not familiar with webpack, so I am facing some difficulties while working with jhipster 4. I want to add some application level js and css files in jHipster. Can someone suggest how to do that.

Answer 1

We learned while implementing primeng to add it in the src/main/webapp/content/scss/vendor.scss for example:

@import '~primeng/resources/primeng.min.css';
@import '~primeng/resources/themes/bootstrap/theme.css';

We added the scss option when creating the jhipster app

Answer 2

Edit src/main/webapp/content/css/global.css file while you are running yarn start: your changes should be hot reloaded. If you have several CSS , either use @import or import them in vendor.ts.

Same thing for your custom js files which should be under src/main/webapp/app but probably written in Typescript rather than javascript. Of course, I assume that you have some knowledge about angular to do so.