Search code examples
cssbowerjhipsterjstree

jstree icons missing when deploying jhipster application

I need to add jstree (version 3.3.4) as a bower dependency to a jhipster project (jhipster version 2.20.0 - not the current version!).

Using the dev profile or when starting the application from my IDE, everything works fine. But when I deploy using the production profile, the .css files of the project get merged into one big file called assets/styles/something.vendor.css when packing the .war file, while images seem to get copied to assets/images/. The web browser ends up asking for assets/styles/32px.png, which results in 404. Instead when using dev profile, styles and images are both loaded from bower_components/jstree/dist/themes/default/

But jstree seems to expects it's icons next to it's css file by referncing them directly (e.g. background: url(32px.png)).

What I tried:

I managed to overwrite some of the rules by adding for example

.jstree-default .jstree-file {
    background: url(../images/32px.png) -100px -68px no-repeat  !important
}

to the projects main css file (src/main/webapp/assets/styles/main.css) and manually adding the images to assets/images.

But jstree seems to have most icons packed into one .png-file - and then shifting/cutting it according to which icon is needed using css rules. This makes it hard to get it to look right.

Using my approach the icons can be loaded - but they are not cut as they should for some (unknown) reason:

result

So I tried to overwrite attributes like repeat: no-repeat or background-color: transparent as well (from my understanding they should be present already as they are part of jstree's css and not overwritten by my rules), but the rules seem too complex and I can not get it to look right and I'm hoping for a better solution.

How can I resolve this issue without having to 'rewrite'/overwrite most of jstree's css rules?

Solution

  • I solved the problem by excluding jstree from the gulp build process (thanks for the hint @Gaël Marziou) by:

    1. making sure jstree is listed in bower.json under "devDependencies", not under "dependencies"

    2. adding 'main/webapp/bower_components/jstree/dist/jstree.js', to jstree (like it was added by bower initially)

    3. editing index.html so that

      • jstree's style.css is included after <!-- endbuild --> in the head section
      • jstree's javascript file is includes after the <!-- endbower --> and <!-- endbuild --> comments

    This way jstree is not packed into vendor.css so that both style and images are loaded from the original location (bower_components/jstree/dist/.