如何在 ruby​​ on rails 上使用 scss partials 使用变量

Question

我创建了一个新的 Rails 应用程序。我使用的是 Ubuntu 18.04 和 Rails 6.0.2.1。

我在 startbootstrap.com 上下载了一个引导模板，并尝试将其用于我的登录页面。所以我复制了 app/assets/stylesheets 中的 css 和 scss 文件，并复制了 HTML。

我在 app/assets/stylesheets 中有以下部分：_variables.scss 和 _call-to-action.scss。

在同一目录中，我还有文件 application.scss ，其中包含以下代码：

/*
 *= require_tree .
 *= require_self
 */
@import "variables";
@import "call-to-action";

我在部分 _call-to-action.scss 中有以下代码：

.call-to-action {
  background-color: $gray-800;
  background: url('../images/bg-masthead.jpg');
}

我在部分 _variables.scss 中有以下代码：

$white: #fff !default;
$gray-800: #343a40 !default;
$black: #000 !default;

当我进入登录页面时，出现以下错误：

SassC::SyntaxError in Pages#home
Showing /home/user/code/myusername/rails-project/app/views/layouts/application.html.erb where line #8 raised:

Error: Undefined variable: "$gray-800".
        on line 4:21 of app/assets/stylesheets/_call-to-action.scss
>>   background-color: $gray-800;

由于我的部分文件是在 application.scss 上导入的，我不明白如何解决这个问题。我是不是做错了什么？

---

编辑：我删除了 require_tree 和 require_self 语法，但现在我收到 500 内部服务器错误。我检查 development.log 时有这个：

> tail -f log/development.log

rack (2.0.8) lib/rack/sendfile.rb:111:in `call'
actionpack (6.0.2.1) lib/action_dispatch/middleware/host_authorization.rb:83:in `call'
webpacker (4.2.2) lib/webpacker/dev_server_proxy.rb:23:in `perform_request'
rack-proxy (0.6.5) lib/rack/proxy.rb:57:in `call'
railties (6.0.2.1) lib/rails/engine.rb:526:in `call'
puma (4.3.1) lib/puma/configuration.rb:228:in `call'
puma (4.3.1) lib/puma/server.rb:681:in `handle_request'
puma (4.3.1) lib/puma/server.rb:472:in `process_client'
puma (4.3.1) lib/puma/server.rb:328:in `block in run'
puma (4.3.1) lib/puma/thread_pool.rb:134:in `block in spawn_thread'

Answer 1

如果您正在使用 SCSS 导入，您不想使用 require_tree 和 require_self 语法。单独这样就可以了：

 @import "variables";
 @import "call-to-action";