ExtJs 4.2使用compass编译主题

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

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

---

你知道怎么做吗？

如果你想从头开始创建一个新的主题，那可能会有点难以承受，我建议你先尝试扩展一个现有的主题。基本上，一个主题由两大部分组成：CSS模板和JavaScript覆盖；CSS依次在SASS代码、mixin和变量之间划分

---

这里有一个讨论4.2主题构建的例子；对于继承示例，您可以查看现有主题：例如，灰色主题扩展了经典主题，而灰色主题又继承了中性主题，中性主题将基本主题作为父主题。Neptune也可以为您提供许多JavaScript覆盖示例。

如果您想从头开始创建一个新主题，这可能会有点难以承受，我建议您首先尝试扩展现有主题。基本上，一个主题由两大部分组成：CSS模板和JavaScript覆盖；CSS依次在SASS代码、mixin和变量之间划分

---

这里有一个讨论4.2主题构建的例子；对于继承示例，您可以查看现有主题：例如，灰色主题扩展了经典主题，而灰色主题又继承了中性主题，中性主题将基本主题作为父主题。Neptune也可以为您提供许多JavaScript覆盖示例。

我们的应用程序中有主题，因为上一次Ext4发布时没有sencha命令工具。请记住，这是4.1代码，自4.2以来可能已经发生了更改。您需要安装ruby/compass，并为compass创建一个配置文件，该文件将告诉它加载ext特定的变量，并且您可以设置compass配置变量

下面是一个名为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

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

• sass/css/redTheme.css

---

我们的应用程序中有主题，因为上一个Ext 4是在没有sencha命令工具的情况下发布的。请记住，这是4.1代码，自4.2以来可能已经发生了更改。您需要安装ruby/compass，并为compass创建一个配置文件，该文件将告诉它加载ext特定的变量，并且您可以设置compass配置变量

下面是一个名为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

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

• sass/css/redTheme.css

---

感谢您的详细回复，但这并不能真正回答我的问题。对不起，我错过了“无Sencha Cmd”部分。是否有任何特别的理由避免Cmd？1。我不可能在构建机器上安装它。2.很慢。3. <代码>指南针手表。安装它有什么困难？也许我们可以解决这个问题。@AlexTokarev有没有办法不用SenchaCmd构建sencha主题？类似于基于grunt/gulp的轻量级快速SASS构建器-让SASS在watcher上重建，并花费1-5秒进行重建，而不是像我们使用SenchaCmd那样花费20-40秒。感谢您的详细回复，但这并不能以任何方式真正回答我的问题。抱歉，我错过了“没有Sencha Cmd”部分。是否有任何特别的理由避免Cmd？1。我不可能在构建机器上安装它。2.很慢。3. <代码>指南针手表。安装它有什么困难？也许我们可以解决这个问题。@AlexTokarev有没有办法不用SenchaCmd构建sencha主题？类似于基于grunt/gulp的轻量级快速SASS生成器-在watcher上重建SASS，并花费1-5秒进行重建，而不是像我们使用SenchaCmd时那样花费20-40秒。@CD。。你能找到你问题的答案吗？我现在正在寻找一个解决方案，允许我使用compass watch开发Sencha 4.2主题。运行Sencha Cmd看起来非常沉重和缓慢。@David：不幸的是，我没有找到解决方案。真遗憾。难怪你能下载的所有主题都这么糟糕。主题化充其量是令人沮丧的。@CD。。你能找到你问题的答案吗？我现在正在寻找一个解决方案，允许我使用compass watch开发Sencha 4.2主题。运行Sencha Cmd看起来非常沉重和缓慢。@David：不幸的是，我没有找到解决方案。真遗憾。难怪你能下载的所有主题都这么糟糕。主题化充其量是令人沮丧的。