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聲明進行修復。

是的，可以通過在“樣式”界面中添加這些樣式來解決問題，但是我想知道是否可以應用一種育兒樣式登錄，並且孩子會自動上移？

Answer 1

如果只想擺脫編譯錯誤，只需在CSS中的所有類中添加@external行，如下所示：

@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類定義一個方法。 如果只有一堆類，最好為它們添加方法。