Сохранение стилей CSS при переходе с ExtJS на 3–4

Question

После обновления нашего приложения 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;
}

Чтобы восстановить внешний вид приложения, я мог

1. Переписать два собственных файла с нуля.
2. Сохраните файлы и определите новые правила для нечетных компонентов. Чтобы сделать это, я должен вручную выбрать их с помощью Firebug и угадать, какой из многих CSS-классов используется компонентом, который я должен перекомпилировать. Это должно занять несколько дней.
3. Разработайте приложение с новой поддержкой тем, о которой я пока не знаю. Это должно быть последним вариантом, потому что это может занять слишком много времени. Также я не вижу, как можно импортировать существующий файл CSS в SASS.

Итак, как лучше перестроить мое приложение ExtJS 4, как старое?

Edit: я не хочу писать CSS в коде, применяя аргумент "style". CSS-файлы должны заботиться о стилях.

Answer 1

Как выясняется, тематика - это абсолютно верный способ сделать это.Мне удалось восстановить наиболее важные стили приложения, следуя этому guide-to-custom-themes-in-extjs-4 .

Вскоре я столкнулся с this ошибка и исправлена ​​ошибка с понижением sass до 3.1.1, как было упомянуто здесь .

Чтобы восстановить большую часть дизайна, мне просто пришлось переопределить следующие переменные в 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;

Как видите, пользовательский дизайн приложения на самом деле довольно прост.:)