ExtJS Theming Multiple CSS Files

Question

In earlier versions of ExtJS, compass compile would compile each sass file placed in the resources/sass into a separate CSS file. For example:

app.scss ---> app.css

login.scss ---> login.css

I'm wondering if I can accomplish something similar using the new theme structure in ExtJS 4 (specifically 4.2.1), and have it nicely integrated with the entire build process covered by Sencha Cmd (running sencha app build).

Answer 1

The Sencha Cmd build process will automatically compile any SASS files in the app's build directory. In the standard build process, Sencha Cmd generates SASS files for the theme automatically and places them in the build folder, but you can use the Ant integration of Sencha Cmd to copy your own SASS files as well.

Suppose you have a bunch of SASS stylesheets stored in a sass/stylesheets directory that you want to compile:

Project
 -> app
 -> build
     -> production
     -> testing
 -> resources
 -> sass
     -> etc
     -> example
     -> src
     -> var
     -> stylesheets
 -> build.xml

All you need to do is add the following target to your build.xml file, which will copy any .scss files in that folder to your build directory prior to the SASS compilation:

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

Then, after running sencha app build, you should see a copy of your SASS files in build/production and the compiled CSS under build/production/resources.

Answer 2

if you have generated your application using sencha-cmd, you'll see the following directories:

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

you can place you css styles to the src directory. remember that the path and filename should match the path as your view.

example: if you have a LoginView.js under your app/view/, you should add its css styles on LogonView.scss under sass/src/view/.