12

我正在以托管模式在 Eclipse 中开发 GWT 应用程序。

当我在 CSS 中更改某些内容时，我无法在浏览器中看到它。我正在尝试使用 CTRL+F5 在浏览器中完全重新加载，在 Eclipse 中重新启动我的应用程序并且没有任何变化。

唯一有帮助的是使用 maven clean install 重建我的应用程序，在 Eclipse 中重新启动应用程序，然后我可以看到更改。这需要很多时间。

知道我做错了什么吗？我认为必须有更好的方法。

问候，卢卡斯

4

5 回答 5

3

问题是在开发模式下，src webapp 文件夹仅在启动时复制到目标，而开发模式不会刷新它。作为一种解决方法，您可以使用copy-resources，它负责即时应用更改。

    <plugin>
        <artifactId>maven-resources-plugin</artifactId>
        <version>3.0.1</version>
        <executions>
            <execution>
                <id>copy-resources</id>
                <phase>validate</phase>
                <goals>
                    <goal>copy-resources</goal>
                </goals>
                <configuration>
                    <outputDirectory>${project.build.directory}/gwt-webapp</outputDirectory>
                    <resources>
                        <resource>
                            <directory>src/main/webapp</directory>
                            <filtering>true</filtering>
                        </resource>
                    </resources>
                </configuration>
            </execution>
        </executions>
    </plugin>
于 2016-06-12T12:28:34.993 回答
2

我为我的应用程序使用了一个外部 CSS 文件，在 Chrome 和 Firefox 中进行简单刷新（没有清空缓存、服务器重启等）后，我会立即看到浏览器中的所有更改。

问题可能与您的文件的位置有关。我的文件在 /war 目录下，我直接编辑它。另一种可能性是您如何在主机页面中引用您的文件。确保你有一个像“/myCss.css”这样的相对路径。

于 2012-09-16T12:56:47.940 回答
0

有3种方法可以解决这个问题。虽然我不使用 eclipse（我使用 IntelliJ 编码并从我的命令行 Gradle 脚本中使用托管模式），但希望它们无论如何都应该工作。

首先是找出您的托管模式从哪里提供文件，理想情况下是一个展开的战争目录。在那里，您可以找到 CSS 文件，这将是您尝试更改的 CSS 文件的精确副本。在那里进行修改，重新加载，修改等，然后在完成后不要忘记复制该文件并将其粘贴回源目录。我使用VIM并来回切换。我相信您可以编写一个脚本，在托管模式结束时将文件复制回来，如果您更热衷的话。

正如 user1570921 所指出的，第二种方法（也是一种更好的方法）是将 CSS 嵌入到 UIBinder 代码中。例如，您可能有：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
         xmlns:g='urn:import:com.google.gwt.user.client.ui'>

<ui:style>
    .outsidePanel {
        background: #00F;
    }
</ui:style>

<g:HTMLPanel styleName="{style.outsidePanel}">
    Hello, World!
</g:HTMLPanel>

在上面的示例中，您可以编辑 ui:style 部分中的 CSS，按 F5 并查看更改，然后进行更多更改等。无需复制文件。

这是获取更多信息的好链接：https ://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Hello_Stylish_World

第三种方法是在 Firefox 中使用 Google Chrome 的开发工具 (CTRL-Shift-I) 或 F12。在那里，您可以编辑内联 CSS，而无需修改您的文件。找出所有正确的值，添加新值，删除旧值，然后对 CSS 文件进行相同的更改。然后，您不必继续重新部署即可查看更改。

我个人使用#2 和#3 的组合。

于 2012-09-15T04:12:28.037 回答
0

从您的项目/应用程序网页，查看页面源代码。当我们右键单击页面时，通常是一个选项。

单击 .css 文件链接，该链接如下所示：

<link type="text/css" rel="stylesheet" href="Foo.css"

在这种情况下，单击 Foo.css

将显示 .css 文件的内容，但可能不包括您的更改。在这种情况下，按 F5 或浏览器刷新按钮刷新 .css 文本。

如果您的 .css 更改现在出现，请返回您的 GWT 项目网页并再次刷新。

或者，使用不同的浏览器可能会暂时显示您的新更改，但如果它也无法刷新 .css 文件，则上述过程将是必要的。

于 2019-09-03T08:04:47.157 回答
0

尝试将一行<stylesheet src="sheet.css" />或<stylesheet src="/sheet.css" />放入您的 project.gwt.xml 文件中。

问候，

涡流

于 2016-09-13T15:17:33.500 回答