ExtJs4.2使用罗盘编译主题

Question

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

我希望创建一个新的主题(它将继承现有的主题)，并能够使用Compass 编译它，而不需要 Sencha。

你知道怎么做吗？

Answer 1

如果您想从头开始创建一个新的主题，这可能会有点让人难以接受，我建议您先尝试扩展一个现有的主题。基本上，主题由两大部分组成: CSS模板和JavaScript重写；CSS反过来又被划分为SASS代码、mixins和变量。

有一个讨论4.2主题构建的主题指南；对于继承示例，您可以查看现有的主题:例如，灰色主题，它扩展了经典主题，而后者又继承了以基本主题为父主题的中性主题。海王星也可以给你提供很多JavaScript覆盖示例。

Answer 2

我们已经在我们的应用程序中进行了主题化，最后的Ext 4是在没有sencha命令工具的情况下发布的。请记住，这是4.1代码，它可能在4.2之后发生了变化。您需要安装ruby/罗盘，并为罗盘创建一个配置文件，该文件将告诉它加载ext特定变量，并且可以设置罗盘配置变量。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

以下是dir结构

• sass/config.rb
• sass/redTheme.sass
• sass/css

redTheme.sass看起来可能类似于：

$base-color: red;

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

在sass目录中编译罗盘之后，它将创建redTheme.css

• sass/css/redTheme.css