I'm working on an Ext JS application and building it with Sencha Cmd (4.0.2.67).
I'd like the application to simply use an out-of-box theme - or eventually a custom theme that we build via a separate package. The 'build app' command, however wants to include a reference to an app-specific CSS file in the generated index.html.
I figured out at some point that for development purposes you can simply reference the out-of-box CSS file in bootstrap.css like this:
For some reason generating the app with the theme option specified does not generate the above in the bootstrap.css file. It also does not set the app.theme property in the application's sencha.cfg file. Making those adjustments seems to make things fine in development.
When I compile, though, the CSS reference in index.html gets changed to (instead of bootstrap.css):
Worse, if I set the skip.sass and skip.slice properties (because I don't really have any custom theme stuff), the custom CSS file isn't generated and the resulting page is completely unthemed.
Is there a reasonably straightforward way to make the build just use the out-of-box theme without trying to build a custom one?
I suppose I could modify the development index.html to remove bootstrap.css and put a link to the OOB CSS file outside of the <x-compile> block. I'm not certain if something else would need to be done to make sure that the theme JS is included.
As a secondary note to this, our application will actually have multiple pages, so it might be better for us to reference a separate theme that is outside the application's folder structure anyway. That way different pages can reference the same CSS file and save extra downloads to the client. Would that be an appropriate approach?
I'd like the application to simply use an out-of-box theme - or eventually a custom theme that we build via a separate package. The 'build app' command, however wants to include a reference to an app-specific CSS file in the generated index.html.
I figured out at some point that for development purposes you can simply reference the out-of-box CSS file in bootstrap.css like this:
Code:
@import '../ext/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css';For some reason generating the app with the theme option specified does not generate the above in the bootstrap.css file. It also does not set the app.theme property in the application's sencha.cfg file. Making those adjustments seems to make things fine in development.
When I compile, though, the CSS reference in index.html gets changed to (instead of bootstrap.css):
Code:
<link rel="stylesheet" href="resources/<myapplication>-all.css"/>Worse, if I set the skip.sass and skip.slice properties (because I don't really have any custom theme stuff), the custom CSS file isn't generated and the resulting page is completely unthemed.
Is there a reasonably straightforward way to make the build just use the out-of-box theme without trying to build a custom one?
I suppose I could modify the development index.html to remove bootstrap.css and put a link to the OOB CSS file outside of the <x-compile> block. I'm not certain if something else would need to be done to make sure that the theme JS is included.
As a secondary note to this, our application will actually have multiple pages, so it might be better for us to reference a separate theme that is outside the application's folder structure anyway. That way different pages can reference the same CSS file and save extra downloads to the client. Would that be an appropriate approach?
Aucun commentaire:
Enregistrer un commentaire