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

Question

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

使用开发配置文件或从我的 IDE 启动应用程序时，一切正常。 但是当我使用生产配置文件进行部署时，项目的 .css 文件在打包 .war 文件时会合并到一个名为 assets/styles/something.vendor.css 的大文件中，而图像似乎会被复制到 assets/images/。 Web 浏览器最终请求 assets/styles/32px.png，结果为 404。 相反，当使用 dev profile 时，样式和图像都从 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 文件中 - 然后使用 css 规则根据需要哪个图标来移动/剪切它。这很难让它看起来正确。

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

所以我尝试覆盖 repeat: no-repeat 之类的属性 或background-color: transparent（据我了解，它们应该已经存在，因为它们是 jstree 的 css 的一部分并且没有被我的规则覆盖），但是规则似乎太复杂了，我无法让它看起来正确，我希望寻求更好的解决方案。

如何在不必“重写”/覆盖大部分 jstree 的 css 规则的情况下解决此问题？

Answer 1

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

1. 确保 jstree 列在 bower.json 的“devDependencies”下，而不是“dependencies”下

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

3. 编辑 index.html 以便

   • jstree 的 style.css 包含在 <!-- endbuild --> 的 head 部分中
   • jstree的javascript文件包含在<!-- endbower -->和<!-- endbuild --> cmets之后

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