如何在 GWT 中将全局样式表迁移到 GSS答案

【问题标题】：How to migrate global stylesheet to GSS in GWT如何在 GWT 中将全局样式表迁移到 GSS
【发布时间】：2017-10-21 04:49:19
【问题描述】：

我有一个 GWT 2.7 应用程序，其中很多样式都是在模块 XML 文件中引用的 CSS 文件中完成的。我想将此文件迁移到 GSS，以便可以使用一些新功能，例如变量和函数。

GSS Migration Guide 有关于迁移到 GSS 的说明，但它似乎仅适用于通过 CSSResource 对象使用的样式。我的理解是，唯一可以通过 CSSResources 访问的类选择器是那些声明了访问器的类选择器，并且所有这些类选择器都将被混淆。这对我不起作用，因为我想使用的选择器是主要通过UIObject.addStyleName 和addStyleDependentName 添加的未混淆的选择器。我也不想每次添加新样式时都必须向界面添加访问器。

关于在 GWT 项目中使用 CSS 文件的other three ways：

在主机 HTML 页面中使用 <link> 标记。
使用模块 XML 文件中的 <stylesheet> 元素。
在 UiBinder 模板中使用内联 <ui:style> 元素。

前两个似乎不支持 GSS：即使我指定了一个 GSS 文件，它也只是直接提供给浏览器而无需处理。

那么，迁移到 UIBinder 是我唯一的选择吗？如果是这样，做到这一点的最小方法是什么？（我当前的 HTML 主机页面只是 default host page，在 <head> 元素中有一些附加内容，所以我觉得这应该很简单）。

【问题讨论】：

标签： gwt

【解决方案1】：

使用<ui:style> 与使用CssResource 相同。 .ui.xml 文件将生成所需的 ClientBundle 和 CssResource 文件，然后这些文件会将 GSS 转换为 css。

当您在 .ui.xml 文件中引用 <ui:style> 内容时，您这样做就像您在接口上调用访问器一样，如 {style.myStyleName} - 因为您正在调用访问器，但它是自动生成的.这可能会稍微限制您在 <ui:style> 标签中可以执行的操作。另一方面，一旦您编写了 CSS，您的 IDE 几乎可以肯定会自动为您添加访问器，如果没有，失败的重新编译将列出它们以便您添加它们。

如果您只是简单地将字符串文字“my-class-name”放在您的 Java 或 HTML 中，编译器将无法知道“my-class-name”在您的应用程序中的任何地方是相同还是不同，并且何时使用一个 CssResource 与另一个。它也无法重写这些字符串，因此您的 CSS 将保持未优化状态。另外，现在您可以检查给定 css 类名称访问器的用法 - 如果没有人使用它，请将其删除，然后删除使用它的 CSS，以使您的 .gss 文件更小，并使您的应用程序更小。

您是正确的，因为 html 中的 <link> 标记和 .gwt.xml 中的 <stylesheet> 标记不会导致运行 GSS。您不需要需要使用 UiBinder（我个人不是粉丝，但有些人喜欢它），但您确实需要使用访问器，否则 GSS 没有任何意义.

如果您想避免混淆和重命名，请考虑直接运行闭包样式表，或者在您的纯 CSS 文件上运行 LESS 或 SASS 之类的东西，它们没有 GWT 集成，因此可以很好地处理您的字符串文字正在使用。这将导致更大的编译输出，并消除您以简单的方式查找和删除未使用的 CSS 的能力。

【讨论】：

感谢您的详细解答！这很有意义。我想我会坚持通过 XML 中的 <stylesheet> 标记引入 CSS。我不得不说这让我对 GWT 中的样式设计方向感到有些失望/困惑：我知道 <ui:style> 和 CSSResource 有各种好处，但会导致更复杂且对设计师不友好的工作流程。此外，<link> 和 <stylesheet> 已弃用但 UIObject.addStyleName 等不是...
HTML 标签<link> 已弃用？我认为你错了。我也不确定<stylesheet> 是否被弃用。 W.r.t.工作流程，它们就是您制作的内容-使用 cssresource.style=pretty 编译，您可以导出易于读/写的 html 和 gss（常规命令行关闭样式表编译器），或者如果您的设计师无论如何都无法处理 gss，我'我不确定你为什么要尝试 GSS（“这样我就可以使用一些新功能”）。我鼓励你在写下它之前多探索一下这个工具，尤其是如果你的设计师想要那些变量/函数。否则：LESS/SASS/plain-css。
我读到 <link> 和 <stylesheet> 在 the documentation 中已被弃用，但这并不是文档第一次给我关于某事的错误印象。至于工作流程，抱歉，我说错了，我不喜欢更多的是编码（响应设计师）工作流程：UIObject.addStyleName 等提供了一种很好的方式，可以逐渐为最初使用香草 GWT 美学构建的应用程序设置样式，但我没有看到与CSSResource 类似的方法。在任何情况下，LESS/SASS 都应该符合您的建议。
哈哈，公平点。措辞不好，让我试着帮忙。据我了解，有两个方面：使用原始 CSS 与原始 JS 一样“不推荐使用”，因为我们有强大的优化编译器——通过使用纯 CSS，您必须手动完成编译器的工作。其次，应该避免使用public/ 目录，因为几乎有更好的方法可以做到这一点 - 同一个应用程序中的两个模块各自在自己的public/ 目录中会互相破坏！这听起来更像是普通 JS 的糟糕过去，而不是我们从 GWT 中想要的......

【解决方案2】：

我后来发现，您可以将 GSS（或 CSS）样式表作为 CSSResource 注入，而不会混淆选择器。只需在样式表中添加以下注释：

@external '*';

这会将文件中的所有选择器标记为外部，这意味着 1) 用作样式表资源的类型的CSSResource 子接口将不再需要实现与样式表中的类选择器对应的访问器方法2) 样式表中的选择器不会被混淆，例如，如果您在样式表中有一个 .foo 类，您将能够使用 UIObject.addStyleName("foo") 将其应用于实体。

通过这种方式，您可以轻松获得 GSS（变量、函数等）和 CSSResource（注入页面而不是提供另一个文件）的一些主要优势，而无需对您的工作流程进行任何更改。

【讨论】：