为什么我在这个 SASS 文件中得到一个未定义的 Foundation 变量错误？

Question

我有一个 Rails 4 应用程序，使用 Foundation-rails v5.2.1.0 gem 和一个用于我的应用程序布局的自定义 SCSS 文件。当我使用foundation_and_overrides.scss文件中的变量时，出现以下错误：

Undefined variable: "$header-font-family"

我在下面包含了相关代码。如果需要，我可以发布更多。有谁知道这里发生了什么？

来自application.css：

*
 *= require foundation_and_overrides
 *= require_self
 *= require_tree .
 */

来自foundation_and_overrides.scss：

// We use these to control header font styles
$header-font-family: "futura-pt", sans-serif;
$header-font-weight: 400;
// $header-font-style: normal;

来自custom.css.scss：

$include-html-global-classes: false;
@import "foundation/components/global";
. 
. 
. 
.footer {
  background-color: black;
  color: white;
  height: 100px;
  font-family: $header-font-family;
}

Answer 1

您收到错误是因为foundation_and_overrides.scss 在 custom.css.scss. 最好的方法是在部分中定义变量，并在基础后将其导入到主样式表中。

首先将文件名从

foundation_and_overrides.scss 到 _foundation_and_overrides.scss

然后 custom.css.scss在基础后将其导入文件中

@import 'foundation_and_overrides';

更新

重命名您的 application.css to application.css.scss 和 custom.css.scss to custom.scss

在你的 application.css.scss 移除 *= require_tree .

然后导入您的主样式表

@import 'custom'

我希望这有帮助