编辑CSS

Question

在使用Vaadin Plugin for NetBeans创建的新Vaadin 7.3应用中，默认主题是新Valo theme。 Valo具有时尚外观，是未来非常重要的技术。在缺点方面，Valo在其默认大小调整中巨大。在我学习如何缩小Valo小部件的尺寸之前，我需要将我的应用程序切换回面向专业的面向业务应用程序的Reindeer theme。

如何在我的应用程序中更改我的代码和项目设置以使用Reindeer主题？

Answer 1

您需要编辑项目的CSS，保存并进行清理和构建。

编辑CSS

在“NetBeans项目”面板中，导航到Web Pages＆gt; VAADIN＆gt; themes＆gt; mytheme＆gt; mytheme.scss。在该文件中：

注释掉@import "../valo/valo.scss";行并替换为@import "../reindeer/reindeer.scss";
注释掉@include valo;行并替换为@include reindeer;

因此，在自动配置的Vaadin 7应用程序中，mytheme.scss文件会发生变化：

@import "../valo/valo.scss";

@mixin mytheme {
  @include valo;

  // Insert your own theme rules here
}

......对此：

@import "../reindeer/reindeer.scss";  /*@import "../valo/valo.scss";*/

@mixin mytheme {
  @include reindeer;  /*  @include valo;*/

  // Insert your own theme rules here
}

保存CSS

将更改保存到＆＃34; mytheme.scss＆＃34;文件。

NetBeans可能会提供在Save上编译Sass文件的功能。 拒绝优惠。您的Vaadin项目已经配置为将Sass重建为CSS，作为清理和构建的一部分。

清洁及建造

然后点击＆＃34;清理和构建＆＃34; NetBeans工具栏上的按钮（锤子和扫帚图标）。

请耐心等待，因为这可能需要几分钟时间。观察“输出”窗格以查看构建完成的时间。

这就是改变项目所需的全部内容。除了下面描述的警告之外，你的新主题应该有效。

浏览器重新加载

有些网络浏览器在缓存方面过于激进（看着你，Safari！）。因此，Valo的CSS等可能仍然会被卡住＆＃34;在您的Web浏览器中。因此，如果您仍然看到Valo外观，那么当您运行项目时不要绝望。

单击Web浏览器的重新加载按钮以强制浏览器转储其缓存，从服务器加载新信息，然后使用其他主题外观重新启动应用程序。在过去，某些浏览器（Firefox？）要求您在单击该重新加载按钮时按住Shift键，但可能不再需要。如果Valo外观仍然存在，请使用搜索引擎了解如何清除特定Web浏览器的缓存。或者尝试其他网络浏览器来验证您的驯鹿主题设置。

Answer 2

如果您没有对主题进行任何自定义，则只需将UI注记@theme("mytheme")更改为默认设置为@theme("reindeer")。

这是有效的，因为JAR还包含了用于驯鹿的SCSS文件，如果你确实有一些自定义样式，你可以在mytheme.scss中导入相同的文件。

在新的Vaadin 7.3 app中，从“Valo”主题改为“Reindeer”

2 个答案:

编辑CSS

保存CSS

清洁及建造

浏览器重新加载