java - GWT 客户端 bundle !重要

Question

如何将!important添加到客户端包GWT中的gwt-image:

我有这个:

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

我想要:gwt-image:'superButton'!重要；我该如何解决我的问题？

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