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

Question

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

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

加载

但 jstree 似乎希望它的图标位于 css 文件旁边，直接引用它们（例如 background: url(32px.png)）。

我尝试了什么：

我设法通过添加例如

覆盖了一些规则

.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 文件中 - 然后 shifting/cutting 根据使用 css 规则需要哪个图标。这使得很难让它看起来正确。

使用我的方法可以加载图标 - 但由于某些（未知）原因，它们没有按应有的方式剪切：

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

如何解决这个问题而不必 'rewrite'/覆盖大部分 jstree 的 css 规则？

Answer 1

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

确保 jstree 列在 "devDependencies" 下的 bower.json 中，而不是 "dependencies"
将 'main/webapp/bower_components/jstree/dist/jstree.js', 添加到 jstree（就像它最初是由 bower 添加的一样）
编辑index.html以便
- jstree 的 style.css 包含在 after  的头部
- jstree 的 javascript 文件包含 after  和  comments

这样 jstree 就不会被打包到 vendor.css 中，所以样式和图像都是从原始位置加载的 (bower_components/jstree/dist/.

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

jstree icons missing when deploying jhipster application

css

jstree

bower

jhipster