在 ExtJS 3 到 4 迁移时保持 CSS 样式答案

【问题标题】：Keeping CSS Styles while ExtJS 3 to 4 Migration在 ExtJS 3 到 4 迁移时保持 CSS 样式
【发布时间】：2012-02-21 09:34:44
【问题描述】：

将我们的 ExtJS 3 应用程序升级到 ExtJS 4 后，一些（但不是全部）组件的外观发生了变化。该应用程序使用三个 CSS 文件：原始的 ext-all.css 和许多年前编写的两个自己的文件。这两个文件似乎是生成并定义了基于类的规则，如

.x-menu-group-item .x-menu-item-icon {
  background-image: none;
}

.x-menu-plain {
  background-color: #fff !important;
}

.x-menu .x-date-picker {
  border-color: #AFAFAF;
}

要恢复应用程序的外观，我可以

从头开始重写自己的两个文件。
保留文件并为奇怪的组件定义新规则。为此，我必须使用 Firebug 手动挑选它们，并猜测组件使用的许多 CSS 类中我必须重新设置样式。这应该需要几天时间。
使用我还不知道的新主题支持为应用程序设置样式。这应该是最后的选择，因为它可能需要很长时间。我也看不到如何在 SASS 中导入现有的 CSS 文件。

那么，像旧的一样重新设计我的 ExtJS 4 应用程序的最佳方法是什么？

编辑：我不想通过应用“样式”参数在代码中编写 CSS。 CSS 文件必须处理样式。

【问题讨论】：

标签： css extjs migration styling

【解决方案1】：

事实证明，主题化是绝对正确的方法。我按照guide-to-custom-themes-in-extjs-4 设法恢复了应用程序中最重要的样式。

很快我遇到了this 的错误，并通过将 sass 降级到 3.1.1 来解决它，就像在here 中提到的那样。

要恢复大部分设计，我只需要在 my-ext-theme.scss 中重新定义以下变量：

$grundblau: #b9d7ff;
$panelrandgrau: #D0D0D0;
$panelgrau: #f1f1f1;

$base-color: $grundblau;

$panel-border-color: $panelrandgrau;
$panel-frame-background-color: $panelgrau;
$panel-header-color: #333333;

如您所见，应用程序的自定义设计实际上非常简单。 :)

【讨论】：