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 两次。

样式表/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 .
*/

样式表/partials/_base.css.scss

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

@include blueprint-typography;

样式表/partials/screen.css.scss

@import "partials/_base";

#container { @include container; }

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

非常感谢您的指导！

Answer 1

如果你正在使用

require_tree .

在您的 application.css 清单中，它将自动包含包含此文件的目录中的所有文件。

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

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

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

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）。