Rails 3.1/Compass/sprockets - 生成两次CSS

Question

使用 GitHub 上的 Compass Rails31 分支和 Sass Rails 版本：

gem "sass-rails", :git => "https://github.com/rails/sass-rails.git"
gem "compass", :git => "https://github.com/chriseppstein/compass.git", :branch => "rails31"

我创建了一个名为_base.css.scss的局部文件，其中包含blueprint/reset和blueprint-typography的导入。我还创建了一个名为screen.css.scss的文件，该文件包含我的基本局部文件。

当Rails将其编译为application.css时，我会看到我的重置和排版css出现了两次。

stylesheets/application.css.scss

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require_tree .
*/

stylesheets/partials/_base.css.scss

@import "blueprint/reset";
@import "blueprint/typography";

@include blueprint-typography;

stylesheets/partials/screen.css.scss

@import "partials/_base";

#container { @include container; }

我不太明白这里发生了什么，以及使用Rails 3.1开始使用Compass的正确配置是什么。

非常感谢您的指导！

- benoitr

Answer 1

如果您正在使用

require_tree .

在你的 application.css manifest 中，它会自动包含包含此文件的目录中的所有文件。

尝试在应用程序的 application.css manifest 中使用以下方法，而不是使用 @import：

/*
  *= require blueprint/src/reset
  *= require blueprint/src/typography 
  *= require_self
  *= require_tree . 
*/

此外，您可能希望将蓝图放在vendor/assets/stylesheets中，而不是app/vendor中（应包含特定于应用程序的代码）。

- Johny

Answer 2

这是我的解决方案，可能不是应该采用的方式（我真的不知道如何使用 sprockets），但它似乎可以工作...如果有更好的方法来实现这一点，请告诉我。

application.css.scss

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require_tree .
*/

@import "blueprint/reset";
@import "blueprint/typography";

@include blueprint-typography;

screen.css.scss

@import "blueprint";
@import "partials/_base";

#container { @include container; }

_base.css.scss

# Columns or colors variables goes here...

- benoitr

---

谢谢你回答自己的问题。我也遇到了同样的困境。 - danneu

Answer 3

这可能不是你的情况，但 CSS 加载两次的一个原因是如果你在 @import 语句中加入了文件扩展名（例如 .css）。

- konyak