extjs - ExtJs 4.2 使用指南针编译主题

Question

根据 Sencha 的文档，应该使用 Sencha CMD 创建和编译新主题。

我想创建一个新主题（它将继承自现有主题）并能够使用 Compass 编译它而无需Sencha CMD。

知道怎么做吗？

Answer 1

如果您想从头开始创建一个新主题，那可能会有点不知所措，我建议您先尝试扩展现有主题。基本上，一个主题由两大部分组成：CSS 模板和 JavaScript 覆盖；CSS 反过来又分为 SASS 代码、mixin 和变量。

有讨论 4.2 主题构建的主题指南；对于继承示例，您可以查看现有主题：例如，扩展经典主题的灰色主题，该主题又继承自中性主题，其中性主题具有基础主题作为父主题。Neptune 也可以为您提供大量 JavaScript 覆盖示例。

Answer 2

我们已经在我们的应用程序中进行了主题化，因为上次发布的 Ext 4 没有使用 sencha 命令工具。请记住，这是 4.1 代码，自 4.2 以来可能已经更改。您需要安装 ruby​​/compass 并为 compass 创建一个配置文件，告诉它加载 ext 特定变量，您可以设置 compass 配置变量。 http://compass-style.org/help/tutorials/configuration-reference/

这是一个名为 config.rb 的示例配置文件（我认为它需要命名为 config.rb 但不要引用我的话。）这是取自 extDir/resources/sass

# $ext_path: This should be the path of where the ExtJS SDK is installed
# Generally this will be in a lib/extjs folder in your applications root
# <root>/lib/extjs
$ext_path = "../extjs/4.1"

# sass_path: the directory your Sass files are in. THIS file should also be in the Sass folder
sass_path = File.dirname(__FILE__)

# css_path: the directory you want your CSS files to be.
# Generally this is a folder in the parent directory of your Sass files
css_path = File.join(sass_path, "css")

# We need to load in the Ext4 themes folder, which includes all it's default styling, images, variables and mixins
load File.join(File.dirname(__FILE__), $ext_path, 'resources', 'themes')

#Compass config variable
relative_assets = true

这是目录结构

• 萨斯/config.rb
• 萨斯/redTheme.sass
• 萨斯/CSS

redTheme.sass 可能看起来像：

$base-color: red;

@import 'compass';
@import 'ext4/default/all';

在 sass 目录中编译指南针后，它将创建 redTheme.css

• 萨斯/css/redTheme.css