部署jhipster应用程序时缺少jstree图标

Question

我需要将jstree（版本3.3.4）作为bower依赖项添加到jhipster项目（jhipster版本2.20.0 - 不是当前版本！）。

使用dev配置文件或从我的IDE启动应用程序时，一切正常。 但是当我使用生产配置文件进行部署时，项目的.css文件在打包.war文件时会合并到一个名为assets/styles/something.vendor.css的大文件中，而图像似乎会被复制到assets/images/。 Web浏览器最终要求assets/styles/32px.png，结果为404。 相反，当使用开发配置文件时，样式和图像都是从bower_components/jstree/dist/themes/default/

加载的

但jstree似乎通过直接引用它们（例如background: url(32px.png)）来预期它的css文件旁边的图标。

我尝试了什么：

我设法通过添加例如

来覆盖一些规则

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

到项目主css文件（src/main/webapp/assets/styles/main.css）并手动将图像添加到assets/images。

但是jstree似乎将大多数图标打包到一个.png文件中 - 然后根据使用css规则需要哪个图标来移动/剪切它。这使得它看起来很难。

使用我的方法可以加载图标 - 但是它们不会因某些（未知）原因而被切割：

所以我试图覆盖像repeat: no-repeat这样的属性 或background-color: transparent以及（根据我的理解，他们应该已经存在，因为他们是jstree的css的一部分，而不是被我的规则覆盖），但规则似乎太复杂，我无法让它看起来是的，我希望有更好的解决方案。

如何在不必重写＆＃39; /覆盖大多数jstree的css规则的情况下解决此问题？

Answer 1

我解决了这个问题，将jstree从gulp构建过程中排除（感谢提示@GaëlMarziou）：

1. 确保jstree在“devDependencies”下的bower.json中列出，而不是在“依赖项”下

2. 将'main/webapp/bower_components/jstree/dist/jstree.js',添加到jstree（最初由bower添加）

3. 编辑index.html以便

   • jstree的style.css包含在 <!-- endbuild -->之后的
   • jstree的javascript文件包含 <!-- endbower -->和<!-- endbuild -->条评论

这样，jstree不会打包到vendor.css中，因此样式和图像都会从原始位置加载（bower_components/jstree/dist/。