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

Question

使用compass Rails31分支和sass-rails的github版本：

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 的指南针的正确配置是什么

非常感谢您的指导！

Answer 1

如果您在 application.css 清单中使用

require_tree .

，它将自动包含包含此文件的目录中的所有文件。

在 application.css 清单中尝试以下方法，而不是使用 @import：

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

另外，您可能希望将蓝图放在供应商/资产/样式表中，而不是应用程序/供应商（其中应包含应用程序特定的代码）

Answer 2

这是我的解决方案，它可能不是应该这样做的方式，（我真的不知道如何使用链轮）但它似乎有效......请让我知道是否有更好的方法来实现这一点。

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...

Answer 3

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