我需要将jstree(版本3.3.4)作为Bower依赖项添加到jhipster项目(jhipster版本2.20.0-不是当前版本!)中。

使用开发人员配置文件或从我的IDE启动应用程序时,一切正常。
但是,当我使用生产配置文件进行部署时,在打包.war文件时,项目的.css文件会合并到一个名为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文件中-然后使用CSS规则根据需要的图标进行移动/剪切。这使得很难使它看起来正确。

使用我的方法,可以加载图标-但由于某些(未知)原因,它们没有被剪裁:

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

所以我试图覆盖repeat: no-repeat之类的属性
background-color: transparent(根据我的理解,它们应该已经存在,因为它们是jstree的css的一部分,不会被我的规则覆盖),但是规则看起来太复杂了,我无法使其看起来正确,我希望寻求更好的解决方案。

如何解决此问题而不必“重写” /覆盖大多数jstree的CSS规则?

最佳答案

我通过以下方式解决了这个问题:通过在gulp构建过程中排除jstree(感谢@GaëlMarziou的提示):


确保jstree列在bower.json中的“ devDependencies”下,而不是“ dependencies”下
'main/webapp/bower_components/jstree/dist/jstree.js',添加到jstree中(就像最初由Bower添加的一样)
编辑index.html,以便


jstree的style.css包含在头部的<!-- endbuild -->之后
jstree的javascript文件位于<!-- endbower --><!-- endbuild -->注释之后



这样,jstree不会打包到vendor.css中,因此样式和图像都会从原始位置(bower_components/jstree/dist/

07-24 09:38
查看更多