在 Rails 中的 SASS 导入中未定义的变量答案

【问题标题】：Variable undefined inside a SASS import in Rails在 Rails 中的 SASS 导入中未定义的变量
【发布时间】：2014-02-17 01:06:40
【问题描述】：

我正在尝试为我的 rails 项目声明一些 globals。在 app/assets/stylesheets 中，我创建了一个 styles.css.scss 文件，如下所示：

$fullWidth: 900px;
@import "templates/navbar";
@import "templates/question-wrapper-main";

我的 app/assets/stylesheets/templates/_navbar.scss 文件如下所示：

.navbar-container {
    width: 100%;
    .navbar {
        width: $fullWidth;
        margin: 0 auto;

        .logo {
            text-align: center;
        }

        .navigation {
            float: right;
        }
    }
}

当我启动我的 rails 服务器时，我得到一个：

Undefined variable: "$fullWidth"

我做错了什么还是 sass 变量只能在它们声明的文件中工作？

【问题讨论】：

尝试强制加载 scss 文件的顺序。似乎_navbar.scss 是在styles.css.scss 之前加载的
您是否删除了application.css 中的*= require_tree 链轮指令？
@DMKE，完成了这项工作！你能解释一下原因吗？
当然，我会形成一个正确的答案;-)

标签： ruby-on-rails sass

【解决方案1】：

这种行为的存在有两个原因：

Rails 设置 Sprockets，以便默认情况下会加载 app/assets/stylesheets 下的任何样式表文件
SASS 足够聪明，不会重复加载已加载的样式表文件。

虽然 (2) 是一种理想的行为，但 (1) 有时不是。要禁用它，您可以删除 Sprockets 指令

/*
 *= require_tree
 */

来自您的app/assets/stylesheets/application.css。该指令遍历您的资产目录递归（因此树）并且只遵循字母顺序（据我所知）。这导致首先加载您的styles.css.scss，然后在您的templates/_navigation.css.scss。

SASS 错误是由于：style.css.scss 已经引用了一个当时未知的变量，该变量仅在之后定义。

【讨论】：

【解决方案2】：

我删除了 *= require_tree sprocket 指令，并且只需要 styles.css.scss，因为我的 css 的所有导入都在该文件中。

【讨论】：

提示：您可以将application.css 重命名为application.css.scss，在那里定义一堆变量，最后是@import "styles";。