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).

hopper · Accepted Answer · 2013-08-12 18:32:08Z

3

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.

edited Aug 12, 2013 at 18:32

answered Aug 12, 2013 at 14:46

hopper

13.5k7 gold badges52 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Артем Кустиков Over a year ago

Dark magic, Ext.js official documentation (docs.sencha.com/extjs/4.2.2/#!/guide/theming) says that placing of *.scss files to /sacc/src folder is enough to include tehm into result CSS.

wns · Accepted Answer · 2013-08-12 09:49:04Z

0

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/.

edited Aug 12, 2013 at 9:49

answered Aug 12, 2013 at 1:32

wns

3,6263 gold badges46 silver badges59 bronze badges

1 Comment

Towler Over a year ago

That will include my styles in the same stylesheet as the rest of the application. I want to be able to define two separate stylesheets.

Collectives™ on Stack Overflow

ExtJS Theming Multiple CSS Files

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related