0

我正在关注 M Hartl 的 Rails 教程，并尝试添加一个 bootswatch 主题。

我已经成功地使用了教程中定义的 boostrap-sass gem，以及来自网络的 twitter-bootswatch-rails gem。

但是，在 Hartl 的教程中，除了默认引导程序之外，我们编写的所有 CSS 都位于单独的 custom.css.scss 文件中。

我的 application.css.scss 文件（从 Rails 默认的 .css 重命名）包含

@import "bootstrap-sprockets";

// Import cerulean variables
@import "bootswatch/cerulean/variables";

// Then bootstrap itself
@import "bootstrap";

// And finally bootswatch style itself
@import "bootswatch/cerulean/bootswatch";
@import "custom";

可行，但是 custom.css.scss 文件引用了 $gray-light，这是在引导程序中设置的变量。服务器将在 css 文件中的变量引用处返回错误，除非我添加

@import "boostrap-sprockets";
@import "bootstrap";

到 custom.css。

但最终结果是，我现在使用了两个巨大的 CSS 文件，我认为这不是原因。

我想到了

@import "custom";

是将我的 custom.css.scss 文件包含到 application.css.scss 文件中，这样它就可以放在一个地方，并且变量可以很好地工作。

另一种可行的方法是将我的整个 custom.css.scss 内容转储到 application.css.scss 中，但这违背了拥有单独文件的意义。

难道我做错了什么？

编辑：为了火上浇油，我从 custom.css 中删除了这两行，取而代之的是 `@import bootswatch/cerulean/variables"; 它可以工作。但是，网站上生成的 CSS 没有任何内容文件。

4

1 回答 1

0

这很可能是错误的，但我将自己的问题的答案发布如下：

似乎 sprockets 行//= require_self和//= require_tree，即使它们默认列在清单的注释部分中，实际上也正在运行。

然后，这会导致每个“需要”的文件都被单独编译。结果，application-FINGERPRINT.css我得到的不是单个文件，而是一个应用程序、一个自定义文件和一个 static_pages 文件。我假设这是“require_tree”行。

删除这些行后，@import "custom"; 线路按我的预期工作。这些文件都合并到一个application-FINGERPRINT.css文件中，我不再需要在custom.scss.

于 2015-05-10T09:38:28.853 回答