Sass $base_color change not working on Sencha Touch

Question

I'm new to SaaS and Sencha Touch, but I am trying to change the base colour to a nice green. Here is the code from my rbTheme.scss file:

$base_color: #546346;

// The following two lines import the default Sencha Touch theme. If you are building
// a new theme, remove them and the add your own CSS on top of the base CSS (which
// is already included in your app.json file).
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';
// Custom code goes here..



// Examples of using the icon mixin:
// @include icon('user');

I have changed the CSS path to rbTheme.css in app.json and I have also compiled with compass too, but it doesn't seem to have made a difference.

On closer inspection it looks like it is being inserted into the CSS, but it is still not displaying?

Answer 1

According to this blogpost , perhaps you might need an extra !default property on your base_color variable. Like this:

$base_color: #546346 !default;

// The following two lines import the default Sencha Touch theme. If you are building
// a new theme, remove them and the add your own CSS on top of the base CSS (which
// is already included in your app.json file).
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';
// Custom code goes here..



// Examples of using the icon mixin:
// @include icon('user');