ExtJS 主题化多个 CSS 文件

Question

在 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）。

Answer 1

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

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

您可以将css 样式放到src 目录中。请记住，路径和文件名应与您的视图中的路径匹配。

示例：如果您的app/view/ 下有一个LoginView.js，您应该在sass/src/view/ 下的LogonView.scss 上添加其css 样式。

Answer 2

Sencha Cmd 构建过程将自动编译应用程序构建目录中的所有 SASS 文件。在标准构建过程中，Sencha Cmd 会自动为主题生成 SASS 文件并将它们放在构建文件夹中，但您也可以使用 Sencha Cmd 的 Ant 集成来复制自己的 SASS 文件。

假设您有一堆 SASS 样式表存储在您想要编译的 sass/stylesheets 目录中：

Project
 -> app
 -> build
     -> production
     -> testing
 -> resources
 -> sass
     -> etc
     -> example
     -> src
     -> var
     -> stylesheets
 -> 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。