I have some CSS in a ClientBundle that uses a background url. Since I load the javascript (/MyModule/MyModule.nocache.js
) from /index.html
, my relative urls in CSS are from root. This means
.myBackground { background: url("images/background.png"); }
will try to load from /images/background.png
. This seems like a perfect case for runtime css substitution. I added the following line to the top of my css file:
@eval modul开发者_开发知识库eName com.google.gwt.core.client.GWT.getModuleName();
How do I now combine the moduleName
variable with the string "images/background.png"
?
I'm looking for something like:
@eval moduleName com.google.gwt.core.client.GWT.getModuleName();
.myBackground { background: url(moduleName + "images/background.png"); }
Unfortunately, this approach causes some errors in the output during compile:
Line 46 column 30: encountered " ". Was expecting one of: <NUMBER> <PERCENTAGE>
<PT> <MM> <CM> <PC> <IN> <PX> <EMS> <EXS> <DEG> <RAD> <GRAD> <MS> <SECOND> <HZ>
<KHZ> <DIMEN> <FUNCTION>
Note: I know, there's CSS Sprites, and I'm using that in some places, but I can't get those working correctly in this case because of GWT's extra style information around a CSS sprite conflicting with the extra style stuff I need.
You could always add a static function somewhere:
public static String getBackgroundUrl(){
return com.google.gwt.core.client.GWT.getModuleName() + "/images/background.png";
}
And in your CSS
@eval BG_URL com.yourclass.getBackgroundUrl();
.myBackground { background-url:BG_URL; }
I'd add this as a comment, but I don't have enough reputation...
I'm not exactly sure what you mean by "GWT's extra style information around a CSS sprite conflicting with the extra style stuff I need", but if you are referring to additional background properties you need to specify, have you tried splitting up background into it's constituent parts? E.g., background-image, background-position, etc. This recently solved an issue I was having with sprites.
精彩评论