sencha touch: I could not theme Sencha Touch / ExtJS application

Question

I am developing a sencha touch application using sencha architect. I have to change the background color, font color, font-family and icons according my company's standard in the app.

I tried to create SASS file
@import 'sencha-touch/base'; @import 'sencha-touch/base/all'; $myapp-font-family:"Arial"; $myapp-gray:'#707070'; .x-body{ font-family:$myapp-font-family; background-color:myapp-gray; } .x-panel{ background-color:$myapp-gray; }

It is not working / reflecting.

Question: how can we theme application. How can we use sass and css altogether in the app. I would like to know the same for ExtJS also.

--Sridhar

Answer 1

If you're already using Sencha Architect, theming is built right in if you're using the latest version. See this post from the Sencha blog.

Answer 2

In sencha touch you have to use the command sencha app build for compiling the sass files. For style editing you can also use sencha app watch, in this way sencha cmd line tool will listent for changes in your sass files and automatically rebuilds your project.

Answer 3

I haven't used sencha architect.

But if its about using sass and css for theming sencha application than this article from moduscreate will really be helpful for a start.