ExtJS主题化多个CSS文件

在早期版本的ExtJS中，

compass compile

将

resources/sass

中的每个sass文件编译成一个单独的CSS文件。例如：

app.scss-->app.css

login.scss-->login.css

---

我想知道我是否可以在ExtJS 4（特别是4.2.1）中使用新的主题结构来实现类似的功能，并将其与Sencha Cmd（运行

Sencha app build

）所涵盖的整个构建过程很好地集成。

如果您使用生成应用程序，您将看到以下目录：

MyProject
--> app
--> build
--> ext
--> overrides
--> packages
--> resources
--> saas
    - etc
    - example
    - src
    - var

您可以将

css

样式放置到src目录中。请记住，路径和文件名应与视图中的路径相匹配

---

示例：如果您的

app/view/

下有一个

LoginView.js

，您应该在

LogonView.scss

下的

sass/src/view/

下添加css样式，Sencha Cmd构建过程将自动编译应用程序构建目录中的任何sass文件。在标准构建过程中，Sencha Cmd会自动为主题生成SASS文件，并将其放置在构建文件夹中，但您也可以使用Sencha Cmd的Ant集成来复制自己的SASS文件

假设有一堆SASS样式表存储在要编译的

SASS/stylesheets

目录中：

项目
->应用程序
->建造
->生产
->测试
->资源
->无礼
->等
->范例
->src
->变量
->样式表
->build.xml

您只需将以下目标添加到

build.xml

文件中，即可在编译SASS之前将该文件夹中的任何

.scss

文件复制到您的构建目录中：

<target name="-before-sass">
    <copy todir="${build.dir}">
        <fileset dir="${app.dir}/sass/stylesheets">
            <include name="*.scss"/>
        </fileset>
    </copy>
</target>

---

然后，在运行

sencha app build

之后，您应该会在

build/production

中看到SASS文件的副本，并在

build/production/resources

下看到编译后的CSS，其中将包括与应用程序其余部分相同的样式表中的我的样式。我希望能够定义两个独立的样式表。Dark magic，Ext.js官方文档（）说，将*.scss文件放在/sacc/src文件夹中足以将tehm包含到结果CSS中。