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?

Hispid

Basically, i just cant add an external CSS via app.json !! What has changed in Sencha Cmd 4 ??? – Hispid

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: sencha.com/forum/… – Leena

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.

Yost

amazing, why isn't this written in 'introduction to theming' tutorial !! – Bogoch

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

Chandless

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! – Hispid