4

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.

Gaël Marziou
  • 16,028
  • 4
  • 38
  • 49
Arif Rabbani
  • 131
  • 1
  • 2
  • 12
  • Welcome to Stack Overflow! You can take the [tour] first and learn [ask] a good question and create a [mcve]. That makes it easier for us to help you. – Katie Feb 06 '17 at 14:15

2 Answers2

9

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

Ernest
  • 962
  • 3
  • 12
  • 28
5

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.

Gaël Marziou
  • 16,028
  • 4
  • 38
  • 49
  • The problem I'm facing with js is that I've some custom js codes written purely in JavaScript. I can't convert them to typescript – Arif Rabbani Feb 06 '17 at 15:19
  • And as for the css, I have 8 custom css files. I don't want to clutter global.css by placing all the code at one place. Is there any other solution – Arif Rabbani Feb 06 '17 at 15:29
  • You don't have to convert your js to typescript to use them, there are many ways to do it that are not specuific to jhipster. I added some hints for css. – Gaël Marziou Feb 06 '17 at 16:00
  • 1
    The thing is custom css files are not added to webpack, so @import does not work, also adding to ventor.ts does not trigger webpack to add those css files to webpack. Adding these files to webpack from webpack.common.js does not help too. Any suggestions? – Alper Mar 15 '17 at 15:00