Question

如何在客户端套件!important中将gwt-image添加到GWT：

我有这个：

@sprite .superButton{
  gwt-image : 'superButton';
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position-x: 10px;
}

我希望：gwt-image : 'superButton' !important; 我该如何解决我的问题？

Answer 1

这是不可能的，因为GWT编译器将忽略您的!important。

实际上，GWT编译器会用以下内容替换你的gwt-image: 'superButton'（在编译时）：

.sprite {
  height: 18px; /* width of your img */
  width: 18px; /* height of your img */
  overflow: hidden;
  background: url("data:image/png;base64,iVBORw0KGg...") -0px -0px no-repeat; /* your image data in base64 encoding */
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position-x: 10px;
}

如果要覆盖GWT编译器生成的任何属性，只需在gwt-image属性后重新声明要覆盖的属性：

@sprite .superButton {
  gwt-image : 'superButton';
  height: 20px; /* This overrides height:18px; generated by the compiler */
}

定义图片的另一种方法是@url使用ImageResource：

@url superButton superButton;

.superButton {
  background-image: superButton;
}

将编译为：

.superButton {
  background-image: url("data:image/png;base64,iVBORw0KGg...");
}

更多信息：http://www.gwtproject.org/doc/latest/DevGuideClientBundle.html#References_to_Data_Resources

GWT客户端捆绑！重要

1 个答案: