css - GWT CSS资源

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声明进行修复。


是的，可以通过在“样式”界面中添加这些样式来解决问题
但是我想知道是否可以应用一种育儿方式登录，并且孩子会自动上移？？？

最佳答案

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

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

这样，您就告诉GWT：“忽略此类，我会照顾他们的”。请参见the relevant doc。

但！
使用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类定义一个方法。如果只有一堆类，最好为它们添加方法。