如何将全局样式表迁移到 GWT 中的 GSS
How to migrate global stylesheet to GSS in GWT
我有一个 GWT 2.7 应用程序,其中很多样式是在模块 XML 文件中引用的 CSS 文件中完成的。我想将此文件迁移到 GSS,这样我就可以使用一些新功能,例如变量和函数。
GSS Migration Guide 有关于迁移到 GSS 的说明,但它似乎仅适用于通过 CSSResource 对象使用的样式。我的理解是,唯一可以通过 CSSResources 访问的 class 选择器是那些为其声明访问器的选择器,并且所有这些 class 选择器都将被混淆。这对我不起作用,因为我想使用的选择器是主要通过 UIObject.addStyleName
和 addStyleDependentName
添加的未混淆的选择器。我也不希望每次添加新样式时都必须向界面添加访问器。
关于在 GWT 项目中使用 CSS 文件的 other three ways:
- 在主机 HTML 页面中使用
<link>
标签。
- 使用模块 XML 文件中的
<stylesheet>
元素。
- 在 UiBinder 模板中使用内联
<ui:style>
元素。
前两个似乎不支持 GSS:即使我指定了 GSS 文件,它也会直接提供给浏览器而不进行处理。
那么,迁移到 UIBinder 是我唯一的选择吗?如果是这样,做到这一点的最小方法是什么? (我当前的 HTML 主页只是 default host page 在 <head>
元素中添加了一些其他内容,所以我觉得这应该很简单)。
使用 <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 class 名称访问器的用法 - 如果没有人使用它,将其删除,然后删除使用它的 CSS,以保留您的 .gss文件更小,您的应用程序也更小。
您是正确的,html 中的 <link>
标记和 .gwt.xml 中的 <stylesheet>
标记不会导致 运行 GSS。你不需要使用 UiBinder(我个人不是粉丝,但有些人喜欢它),但你确实需要使用访问器,否则 GSS 没有意义就目前而言。
如果你想避免混淆和重命名,直接考虑 运行 闭包样式表,或者在你的普通 CSS 文件中使用类似 LESS 或 SASS 的东西,它们没有GWT 集成,因此可以很好地处理您已经在使用的字符串文字。这将导致更大的编译输出,并消除您以简单的方式查找和删除未使用的 CSS 的能力。
我后来发现,您 可以 将 GSS(或 CSS)样式表作为 CSSResource
注入,而无需选择器混淆。只需将以下注释添加到样式表:
@external '*';
这会将文件中的所有选择器标记为外部选择器,这意味着 1) 用作样式表资源类型的 CSSResource
子接口将不再需要实现对应于 class 样式表中的选择器和 2) 样式表中的选择器将不会被混淆,因此例如,如果样式表中有 class .foo
,您将能够将其应用于使用 UIObject.addStyleName("foo")
.
的实体
通过这种方式,您可以轻松获得 GSS(变量、函数等)和 CSSResource(注入页面而不是提供另一个文件)的一些主要优势,而无需进行任何更改到您的工作流程。
我有一个 GWT 2.7 应用程序,其中很多样式是在模块 XML 文件中引用的 CSS 文件中完成的。我想将此文件迁移到 GSS,这样我就可以使用一些新功能,例如变量和函数。
GSS Migration Guide 有关于迁移到 GSS 的说明,但它似乎仅适用于通过 CSSResource 对象使用的样式。我的理解是,唯一可以通过 CSSResources 访问的 class 选择器是那些为其声明访问器的选择器,并且所有这些 class 选择器都将被混淆。这对我不起作用,因为我想使用的选择器是主要通过 UIObject.addStyleName
和 addStyleDependentName
添加的未混淆的选择器。我也不希望每次添加新样式时都必须向界面添加访问器。
关于在 GWT 项目中使用 CSS 文件的 other three ways:
- 在主机 HTML 页面中使用
<link>
标签。 - 使用模块 XML 文件中的
<stylesheet>
元素。 - 在 UiBinder 模板中使用内联
<ui:style>
元素。
前两个似乎不支持 GSS:即使我指定了 GSS 文件,它也会直接提供给浏览器而不进行处理。
那么,迁移到 UIBinder 是我唯一的选择吗?如果是这样,做到这一点的最小方法是什么? (我当前的 HTML 主页只是 default host page 在 <head>
元素中添加了一些其他内容,所以我觉得这应该很简单)。
使用 <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 class 名称访问器的用法 - 如果没有人使用它,将其删除,然后删除使用它的 CSS,以保留您的 .gss文件更小,您的应用程序也更小。
您是正确的,html 中的 <link>
标记和 .gwt.xml 中的 <stylesheet>
标记不会导致 运行 GSS。你不需要使用 UiBinder(我个人不是粉丝,但有些人喜欢它),但你确实需要使用访问器,否则 GSS 没有意义就目前而言。
如果你想避免混淆和重命名,直接考虑 运行 闭包样式表,或者在你的普通 CSS 文件中使用类似 LESS 或 SASS 的东西,它们没有GWT 集成,因此可以很好地处理您已经在使用的字符串文字。这将导致更大的编译输出,并消除您以简单的方式查找和删除未使用的 CSS 的能力。
我后来发现,您 可以 将 GSS(或 CSS)样式表作为 CSSResource
注入,而无需选择器混淆。只需将以下注释添加到样式表:
@external '*';
这会将文件中的所有选择器标记为外部选择器,这意味着 1) 用作样式表资源类型的 CSSResource
子接口将不再需要实现对应于 class 样式表中的选择器和 2) 样式表中的选择器将不会被混淆,因此例如,如果样式表中有 class .foo
,您将能够将其应用于使用 UIObject.addStyleName("foo")
.
通过这种方式,您可以轻松获得 GSS(变量、函数等)和 CSSResource(注入页面而不是提供另一个文件)的一些主要优势,而无需进行任何更改到您的工作流程。