Need app-wide CSS constants in GWT

Question

Hi. I'd like to define some colours as constants in a GWT CssResource, and use those constants throughout my application; but I don't know how to do that.

I'll tell you what what I've tried. I've created a ClientBundle and a CssResource as follows:

public interface Resources extends ClientBundle {
  public interface MyStyle extends CssResource {
    String JUNGLEGREEN();
    String example();
    ...
  }
  @Source("Resources.css")
  MyStyle css();
}

I've defined some constants in Resources.css:

@def JUNGLEGREEN #1F3D0A;

Within Resources.css, I use those constants like so:

.example { color:JUNGLEGREEN; }

I'm not aware of a way to re-use those constants in other CSS files and UiBinder templates. I'd like to do this in some other UiBinder file, say LoginView.ui.xml:

<ui:with field='resources' type='com.example.Resources' />
<ui:style>
  .mainPanel {
    background:{resources.css.JUNGLEGREEN};
    ...
  }
</ui:style>

...but it doesn't seem to compile. Do you know how I can achieve my objective?

Answer 1

You should be able to use

<ui:style>
  @IMPORT url("../../../global.css");
  .mainPanel {
    background:{resources.css.JUNGLEGREEN};
    ...
  }
</ui:style>