Question

我有一个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>元素中有一些额外的东西，所以我觉得这应该是直截了当的。）

Answer 1

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

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

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

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

如果你想避免混淆和重命名，可以考虑直接运行closure-stylesheets，或者在普通的CSS文件中使用LESS或SASS之类的东西，它们没有GWT集成，因此你的字符串文字已经很好了正在使用。这将导致更大的编译输出，并且无法轻松找到和删除未使用的CSS。

Answer 2

正如我后来发现的那样，事实证明你可以将GSS（或CSS）样式表作为CSSResource注入而不会使选择器被混淆。只需将以下注释添加到样式表中：

@external '*';

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

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

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

2 个答案: