Problems building themes

ExtJS version: 4.2.0.489
Sencha Cmd version: 3.1.0.130

I'm trying out the new 4.2 RC and I'm having three issues relating to the new theming system:

1) Whenever I try to build the app using sencha app build (using a vanilla build configuration), the resulting app-all.css file is "empty" - not really empty, but it simply contains these comments:

Code:

---

/**
 * @class Global_CSS
 *
 * Global CSS variables and mixins of Ext JS.
 */
/**
 * Creates a background gradient.
 *
 * @param {Color} $bg-color The background color of the gradient
 * @param {String/List} [$type] The type of gradient to be used. Can either
 * be a String which is a predefined gradient, or it can can be a list of
 * color_stops. If none is set, it will still set the `background-color`
 * to the $background-color.
 * @param {String} [$direction=top] The direction of the gradient. Can either be
 * `top` or `left`.
 * @member Global_CSS
 */
/*
 * Method which inserts a full background-image property for a theme image.
 * It checks if the file exists and if it doesn't, it'll throw an error.
 * By default it will not include the background-image property if it is not found,
 * but this can be changed by changing the default value of $include-missing-images to
 * be true.
 */

---

Nothing else, so the app is completely unstyled...


2) Whenever I try to build a theme package using sencha package build, it fails on "Capturing theme image":

Code:

---

[INF] Capturing theme image
[ERR]
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExProcess: phantomjs process exited with code 2 :
[ERR] loading page <Path To App>/packages/symfoni/build/example/theme.html
[ERR] == Unhandled Error ==
[ERR] ReferenceError: Can'''''''''t find variable: Ext
[ERR]
[ERR]  file:////<Path To App>/packages/ext-theme-base/sass/example/render.js:22

---

It doesn't matter if I try building a new custom theme, or one of the standard one - the results are the same..


3) If i try to change the default theme in .sencha/app/config.cfg, for example setting it to use neptune:

Code:

---

app.theme=ext-theme-neptune

---

Then sencha app refresh simply dies with the following, not-so-enlightening, error message:

Code:

---

Sencha Cmd v3.1.0.130
[ERR] null

---

Can anyone shed any light on what might possibly be wrong with my setup?

Best regards,
Henrik

Well, I've resolved the first issue at least.. I had the app.js file in my app root directory (as opposed to the normal Sencha Cmd location app/app.js) - the way that Sencha Architect likes to store it.

I never really understood why Architect insists on storing the app.js in a "non-standard" way, but the 3.0 version of Cmd could cope with it at least..

One down, two more to go...

And the third issue is solved as well - I needed to make sure app.json required the theme package that I needed. Quite obvious really, but the error message produced could be vastly improved..

The second one was due to the file <theme folder>/sass/example/theme.html. It contains a link to ExtJS that looks like:

Code:

---

<script type="text/javascript" src="/ext-all-debug.js"></script>

---

For my setup, I simply updated it to:

Code:

---

<script type="text/javascript" src="../../../../ext/ext-all-debug.js"></script>

---

Also worth noting as that when you generate a new theme (using sencha generate package), the file <theme folder>/sass/config.rb is missing so you have to manually copy that from one of the bundled themes..

//H

Thanks for all that Henrik - I ran into similar problems.

Did you play with adding mods to you generated theme? That's where I'm stuck now, nothing I add to the sass folders seems to create anything in the css output.

I've tried adding an all folder like ext-theme-gray and ext-theme-access that imports the other folders in the directory:

<theme folder>/sass/all/all.scss

Code:

---

@import '../etc/all';
@import '../var/all';
@import '../src/all';

---

and I've put in a Component.scss with different colors into

<theme folder>/sass/vars

When I do sencha ant sass it looks like my theme is being included in the css generation process:

Code:

---

[INF] -sass:
[INF] Loading configuration from C:\work\ies_web_apps\ies_expert_app
[INF] Compiling page page
[INF] Loading classpath entry C:\work\ies_web_apps\ext\src
[INF] Loading classpath entry C:\work\ies_web_apps\packages\ext-theme-base\overrides
[INF] Loading classpath entry C:\work\ies_web_apps\packages\ext-theme-base\src
[INF] Loading classpath entry C:\work\ies_web_apps\packages\ext-theme-neutral\overrides
[INF] Loading classpath entry C:\work\ies_web_apps\packages\ext-theme-neutral\src
[INF] Loading classpath entry C:\work\ies_web_apps\packages\ext-theme-neptune\overrides
[INF] Loading classpath entry C:\work\ies_web_apps\packages\ext-theme-neptune\src
[INF] Loading classpath entry C:\work\ies_web_apps\packages\[Theme Folder]\overrides
[INF] Loading classpath entry C:\work\ies_web_apps\packages\[Theme Folder]\src
[INF] Loading classpath entry C:\work\ies_web_apps\ies_expert_app\app
[INF] Loading classpath entry C:\work\ies_web_apps\ies_expert_app\sencha-compile-temp-dir\2107d557-04a0-4919-aebb-adda61c9ac41
[INF] generating sass for js compile context
[INF]
[INF] -after-sass:

---

But there are no changes in the css output.

Ok I got it. I can't use sencha ant sass any more to create the css. I need to use sencha app build or sencha package build from within the theme package folder.

Edit: sencha app refreshis definitely a better option

Hey,
Great that my discoveries could help someone.. :)

And good that you resolved your problem.. I've been using sencha ant sass theme myself, I wonder which one is better; refresh or theme.. I guess I'll have to run some tests and see if one option is quicker than the other (building the theme is painfully slow for me)..

//H

Yes I do sorely miss

compass watch

:(