sencha cmd 4 and sencha touch 2.3 adding css in app.json

Question

I have been using Sencha touch 2.3 with Sencha Cmd 3 and there has been no issues.

I recently upgraded to Sencha Cmd 4 and generated a new Sencha Touch 2.3 app.

Now, I tried to change the theme by adding the following in the app.json file:

"css": [
    {
        "path": "touch/resources/css/cupertino.css",
        "platform": ["chrome", "safari", "ios", "ios-classic", "android", "firefox"]
        "theme": "Cupertino",
        "update": "delta"
    },
],

and i removed the previously existing code:

{
    "path": "resources/css/app.css",
    "update": "delta"
}

This is not reflecting in the app. What is wrong ? This is the approach that is suggested by the docs. But it is just not happening. If i directly place the cupertino.css in the resources/css path and rename it to app.css, it reflects. So where is the app.css being set?

Basically, i just cant add an external CSS via app.json !! What has changed in Sencha Cmd 4 ??? — senchaDev, Oct 22 '13 at 11:51
I am still running the same issue, and though few days ago, I opened similar thread on sencha forums but the solution provided seems not working: http://www.sencha.com/forum/showthread.php?274253-Sencha-touch-2.3-themes-are-not-installed-by-default&p=1005178#post1005178 — Malloc, Oct 22 '13 at 14:03

score 19 · Accepted Answer · answered Oct 25 '13 at 21:43

19

Sencha CMD 4 uses the bootstrap.js file to launch the app. Run the sencha app refresh command to update the bootstrap.js file with the css properties defined in your app.json file.

answered Oct 25 '13 at 21:43

Jeff Martin

550
4
12

1

amazing, why isn't this written in 'introduction to theming' tutorial !! – EralpB Jan 28 '14 at 19:21

score 1 · Answer 2 · answered Oct 25 '13 at 23:41

Can you please post your cupertino.scss file to make sure that everything is configured in the right way. I faced this issue when i migrated to Sencha Touch 2.3 & CMD4.

Also you don't need to reference the whole path inside app.json

Correct app.json

"css": [
    {
        "path": "resources/css/cupertino.css",
        "platform": ["chrome", "safari", "ios", "ios-classic", "android", "firefox"]
        "theme": "Cupertino",
        "update": "delta"
    },
],

Correct Cupertino.scss

@import 'sencha-touch/cupertino';
@import 'sencha-touch/cupertino/all';
$background-color: #fff !default;
$primary-text-color: $ios7-blue !default;
$secondary-text-color: #000 !default;

@import 'shared';
.charttoolbar {
    .x-button {
        border: 1px solid $ios7-blue;
        background-color: white;
    }
}

It is not just with cupertino.css. I was facing this problem with any external css that I wanted to add via app.json. It was not reflecting. But as @jeff pointed out, running sencha app refresh worked! — senchaDev, Oct 29 '13 at 05:54

sencha cmd 4 and sencha touch 2.3 adding css in app.json

2 Answers2