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

Question

我正在尝试为我的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变量只能在声明它们的文件中工作？

Answer 1

出现这种行为有两个原因：

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

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

/*
 *= require_tree
 */

来自app/assets/stylesheets/application.css的

。此指令遍历您的资产目录递归（因此树），并且只遵循字母顺序（据我所知）。这会导致首先加载styles.css.scss，后加载<{1}}。

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

Answer 2

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