PDA

View Full Version : How to override SASS variables in the default theme without creating a custom theme?



murrah
2 Jan 2015, 5:16 PM
Hi. I am missing something obvious I think.

I have read the themeing guide, can create a custom theme, set variables etc.

However I would like to just use the ext-theme-gray and change a few variables without hacking the library theme files themselves. So, I set the theme via the sencha.cfg file and have the default gray theme. All good so far.

Now, following the cited example of setting a base color I created a file myapp/sass/var/Component.scss and set $base-color: #00f !default; as a test. I then rebuilt a production build via sencha cmd but the base color remains #ccc.

What am I missing please?

Thanks,
Murray

lumberjack
6 Jan 2015, 6:59 AM
Check out the section "Styling Your Application" in our Theming Guide (http://docs.sencha.com/extjs/4.2.3/#!/guide/theming-section-styling-your-application).

You'll want to override the $base-color variable in whatever your main view is.

For example, in the demo app generated by Sencha Cmd, the main view is app/view/Main.js, so you'd place the override in app/sass/var/view/Main.scss.

Regards,
Brian

murrah
22 Jan 2015, 12:51 PM
For example, in the demo app generated by Sencha Cmd, the main view is app/view/Main.js, so you'd place the override in app/sass/var/view/Main.scss

Thanks Brian. I was making a dumb mistake. My Main.js is defined as 'App.view.Main' since I am mapping the loader path as
Ext.Loader.setConfig({
enabled: true,
paths: {
'App': 'app'

etc...
}
}); so my override needed to be in app/sass/var/App/view/Main.scss rather than app/sass/var/view/Main.scss.

I am spelling that out in case others fall into the same trap.

Thanks for your reply, much appreciated. :)

Murray