GWT CSS资源

Question

CSSResource 接口

public interface AppResources extends ClientBundle {
    public static final AppResources INSTANCE = GWT.create(AppResources.class);

    interface Style extends CssResource {
        String login();
    }

    @Source("css/style.gss")
    Style style();

    @Source("images/logo.png")
    ImageResource logo();
}

样式

.login {
    width: 100%;
    height: 100%;
}

.login .panel-body {
    text-align: center;
}

.login .loginWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.login .input-group {
    padding-bottom: 10px;
    width: 300px;
}

.login .input-group-addon {
    width: 100px;
}

当您尝试编译时出现错误

[错误] 严格的 CssResource 中存在以下未混淆的类：panel-body。通过向混淆类的 CssResource 接口添加字符串访问器方法来修复，或对未混淆类使用 @external 声明。

[错误] 严格的 CssResource 中存在以下未混淆的类：input-group-addon。通过将字符串访问器方法添加到混淆类的 CssResource 接口来修复，或对未混淆类使用 @external 声明。

[错误] 严格的 CssResource 中存在以下未混淆的类：input-group。通过将字符串访问器方法添加到混淆类的 CssResource 接口来修复，或对未混淆类使用 @external 声明。

是的，在界面Style中添加这些样式可以解决问题 但是我想知道是否可以申请一个育儿样式登录，孩子会自动向上移动？？？

Answer 1

如果您只是想摆脱编译错误，只需@external在 CSS 中添加一行包含所有类的行，如下所示：

@external panel-body, loginWrapper, input-group, input-group-addon;

这样你就告诉 GWT：“忽略这些类，我会处理它们”。请参阅相关文档。

但！
使用的要点之一CSSResource是您可以这样做：

myWidget.addClassName(AppResources.INSTANCE.style().panelBody());
myWidget.removeClassName(AppResources.INSTANCE.style().loginWrapper());

取而代之的是：

myWidget.addClassName("panel-body");
myWidget.removeClassName("loginWrapper");

第二个版本更容易出错，因为您是手动编写类名，并且在启动应用程序之前您不会知道自己是否做得对（除非您的 IDE 检查了 CSS 类名并事先警告您）。

有了CSSResource你可以非常定义了所有必要的方法的造型接口，在Java代码中使用它们，让支持实际的CSS文件和属性别人（设计师）照顾。
而且，由于现在您的 Java 代码只关心接口方法，GWT 可以获取您的 CSS 并对其进行清理、缩小和混淆，以便在编译和运行时更好地对其进行管理。

这些好处的代价是必须为您希望 GWT 管理的每个 CSS 类定义一个方法。如果您只有一堆类，最好为它们添加方法。