How to handle custom css files while generating production build using sencha cmd v3

[gendaful]

Hi All.


I am working on a mobile website developed using sencha touch 2. I had used sencha cmd v3 to generate the production build. When i tested the production build, I found that my custom css files are included in the folder structure but the custom styles are not applied on the UI elements.


Please see, I am not using SASS/COMPASS in this application. Any ideas on where things went wrong or I missed out anything? Do I have to treat custom css files differently and do something special while creating the production build? Do I need to include references of these custom css files in app.json while creating the production build? Please help.


Thanks

[busaware1]

Hi,

To check your custom CSS is hooked up you can do the following.

Assuming you have a custom CSS - mycustom.css and you put in your /resources/css folder , alongside your app.css.

After running a sencha cmd build (say a test build) - open your index.html and search for your custom css file. You should find something like:

{"path":"resources/css/mycustom.css","type":"css"}

if you dont open your app.json file - used by sencha cmd to build from. You should have the following similar config:

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

If that all looks good and you still cant see your styles being used then make sure you are using the 'cls' config on your sencha view objects and components (where you wish to) e.g.

  config:
{
  cls: 'myclass'
, 
 items:
[
    {
  xtype: 'container',
                cls: 'myclass2 myclass3' // note we can overload classes as per normal css
   }

]
}

There is also another config setting which may assist in certain curcumstances:

styleHtmlContent: true, // allow CSS to take precendence

I hope this helps.