Sencha cmd 4 and sencha touch 2.3 add css to app.json

Question

I am using Sencha touch 2.3 with Sencha Cmd 3 and there were no problems.

I recently upgraded to Sencha Cmd 4 and created a new Sencha Touch 2.3 application.

Now I tried changing the theme by adding the following to 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 deleted the previously existing code:

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

This is not reflected in the application. What's wrong? This is the approach suggested by the docs. But that just doesn't happen. If I directly placed cupertino.css in the / css resource path and renamed it to app.css , it reflects. So where is app.css installed?

Answer 1

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

Answer 2

Can you place your cupertino.scss file to make sure everything is configured correctly. I ran into this problem when I switched to Sencha Touch 2.3 and CMD4.

Also you do not need to reference all the way inside app.json

Fix app.json

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

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