更新

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'

我希望这会有所帮助

Answer 2

最干净的方法是添加行

@import "custom";

在行

之前

到您的文件foundation_and_overrides.scss

@import "foundation";

根据接受的答案中的说明，无需从*= require_tree .删除application.css.scss。如果您将require foundation_and_overrides留在那里，也无需将application.css添加到require_tree .。

Answer 3

根据Rails Docs：

如果要使用多个Sass文件，通常应使用Sass＆gt; @import规则而不是这些Sprockets指令。当使用Sprockets＆gt;指令时，Sass文件存在于它们自己的范围内，使变量或＆gt; mixins仅在它们定义的文档中可用。

所以在这种情况下，指令的顺序（application.css中以* =开头的行）并不重要，因为每个文件都在自己的范围内，你不能从另一个scss访问它们的变量文件。这就是为什么你要@import foundation_and_overrides然后自定义，或者@import你的自定义样式表到 foundation_and_overrides。

为什么在此SASS文件中出现未定义的Foundation变量错误？

3 个答案:

更新