ruby-on-rails - 为什么我在此 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 重命名为 application.css.scss 并将 custom.css.scss 重命名为 custom.scss

在你的 application.css.scss 中删除 *= require_tree .

然后导入你的主样式表

@import 'custom'

希望对你有帮助