Rails4资产预编译失败

Question

在我的应用程序中，我有各种主题，用户可以从特定网页中选择。这些主题仅在颜色和字体类型方面有所不同。因此，为了不重复css声明，我创建了一个scss文件，其中包含常见的css声明ztheme.css.scss，其中包含所有主题中的常见CSS样式。我有各种主题scss文件（例如silver.css.scss，melon.css.scss - 如下所示），仅包含为颜色和字体类型定义的变量值。在所有这些主题scss文件中，您可以在底部看到它将公共ztheme.css.scss导入为@import 'ztheme'。因此，当这些主题文件被编译时，它们将具有通用的css样式，具有适当的颜色和字体类型值。

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;
}

问题是当我在heroku上部署此代码并且资产预编译开始然后它在ztheme.css.scss中失败时，因为它查找在其中定义的变量的值。并抛出此错误：

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

然而，您可以看到，ztheme正在每个主题文件中导入，因此当在这些文件中导入ztheme时，这些zthemes的值应该正确填充并且不应该抛出{{ 1}}错误。

如何解决这个问题？

我的资产结构如下：

Answer 1

很难确定代码中的代码是什么代码，但我认为您可能已经向后完成了@imports。尝试将所有主题导入＆＃39; ztheme.css.scss＆＃39;，因为它们是您定义的地方＆＃39; $ nav-bg-color＆＃39;。

这可能不是一个包罗万象的解决方案，而是从某个地方开始。

我希望这会有所帮助。

Answer 2

经过多次尝试，我终于找到了解决方案。我必须在default中为这些变量添加ztheme.css.scss值，并在主题特定的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;
}