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

Question

我正在尝试为我的rails项目声明一些全局变量。在应用程序/资产/样式表中，我创建了一个 styles.css.scss 文件，如下所示：

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

我的应用程序/资产/样式表/模板/_navbar.scss文件如下所示：

.navbar-container {
    width: 100%;
    .navbar {
        width: $fullWidth;
        margin: 0 auto;
        .logo {
            text-align: center;
        }
        .navigation {
            float: right;
        }
    }
}

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

Undefined variable: "$fullWidth"

我做错了什么还是 sass 变量仅在声明它们的文件中起作用？

Answer 1

此行为存在有两个原因：

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

虽然（2）是期望的行为，但（1）有时不是。要禁用它，您可以删除链轮指令

/*
 *= require_tree
 */

从你的app/assets/stylesheets/application.css.这条指令以递归方式遍历您的资产目录（因此是树），并且只服从字母顺序（据我所知）。这会导致首先加载您的styles.css.scss，然后加载您的templates/_navigation.css.scss。

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

Answer 2

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