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?

Answer 1

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.

Answer 2

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;
    }
}