Rails4 asset precompiling fails

Question

In my application, I have various themes user can select from for a particular web page. These themes just differs in terms of color and font types only. So in order to not to repeat the css declaration, I have created a scss file containing common css declarations ztheme.css.scss that contains common css styles in all themes. And I have various themes scss files (e.g. silver.css.scss, melon.css.scss - shown below) with merely variables value defined for color and font type. In all these theme scss files, you can see at the bottom it imports the common ztheme.css.scss as @import 'ztheme'. So that whene these themes files get compiled, they will have common css styling with appropriate color and font types value.

silver.css.scss

$nav_bg_color: #F6F6F6;
$page_font: 'Sintony', sans-serif;
$page_txt_color: #000033;
@import 'ztheme';

melon.css.scss

$nav_bg_color: #F2F6C6;
$page_font: 'Arial', verdana;
$page_txt_color: #628002;
@import 'ztheme';

ztheme.css.scss

body{
  padding-bottom: 20px;
  background: $nav_bg_color;
  font-family: $page_font;
  text-rendering: optimizelegibility;
  color: $page_txt_color;
}

The problem is when I deploy this code on heroku and asset precompiling kicks off and then it fails in ztheme.css.scss because it looks for the value of variables defined in it. and throw this error:

remote:        rake aborted!
remote:        Sass::SyntaxError: Undefined variable: "$nav_bg_color".
remote:        /tmp/build_ded002611a0752bd96038a671fd8051c/app/assets/stylesheets/themes/ztheme.css.scss:9

However you can see, ztheme is being imported in every theme files, so when ztheme will be imported in those files, these zthemes' value should get populated properly and it should not throw Undefined variable error.

How to solve this problem?

I have structured my assets as follows:

Answer 1

It's difficult to determine what code is in what file from your code, but I think you may have done your @imports backwards. Try importing all of your themes into 'ztheme.css.scss', because they're where you define '$nav-bg-color'.

This might not be an all-inclusive solution, but somewhere to start from.

I hope this helps in some way.

Answer 2

After several attempts, finally I found the solution. I had to add a default value for these variables in ztheme.css.scss that gets overridden in theme specific scss

$nav_bg_color: #F1C5CE  !default;
$page_font: Arial, Verdana !default;
$page_txt_color: #459823 !default;

body{
  padding-bottom: 20px;
  background: $nav_bg_color;
  font-family: $page_font;
  text-rendering: optimizelegibility;
  color: $page_txt_color;
}