调试 Rails 资产管道的最佳实践

Question

我正在使用 Rails 3 应用程序 bootstrap-sass 和资产管道，我正在寻找有关如何调试资产管道问题的一些想法。

在进行开发和动态编译（即包括从大量编译的 css 文件中）时，我的应用看起来完全符合我的预期。

但是，当我使用资产管道将资产编译到单个文件中以测试其在生产中的行为时，我认为连接文件 application.css 中的验证错误导致浏览器停止正确评估 css，并且我发现了一些显示问题。

当我在开发中查看生成的 css 文件并将它们传递给 css3 验证器时，我可以看到在使用供应商的 css 文件时会发生验证错误（在大多数情况下，这些错误是由于供应商特定的 hack，引发验证器）- 当我通过 w3c 验证器运行它们时，我生成的文件正在通过验证，并且我在下面的 sprockets 文件中列出了通过/失败结果：

/*
 * sprocket file in application.css
 *
 *= require_self
 *= require vendor
 *= require bootstrap-include # FAILS 474 ERRORS - presumably down to css hacks
 *= require DT_bootstrap      # FAILS TWO ERRORS - presumably down to css hacks again
 *= require navbar            # PASSES
 *= require footer            # PASSES
 *= require main              # PASSES
 *= require home              # PASSES
 *= require widget            # PASSES
 *= require search            # PASSES
 *= require devise            # PASSES
 *= require doohickeys        # PASSES
 *= require datepicker        # FAILS - again yet more cross browser css hacks suspected
*/

当这样的连接破坏了应用的视觉效果时，您应该如何开始为生产准备文件？

我在这里询问如何最好地调试这样的编译样式表 - 这听起来像是以前优雅地解决过的问题，但我不知道在处理一个可靠的方法时像这样的问题。

例如，我可以看到一些规则没有通过使用 Firefox 和 Webkit 中的 Web 开发人员检查器工具进行评估，但我不清楚如何超越这一点，除非对编译后的 CSS 进行一些费力的二进制搜索.

肯定已经有一些更专业的工具可用于此类情况，例如只能编译 application.css 中的一些文件，并单独链接到预编译的 bootstrap-sass 文件，或类似的东西？

Answer 1

如果你正在使用类似 bootstrap-sass 的东西，你不应该使用 Sprocket 指令，你应该使用@import。

将您的清单文件从 application.css 重命名为 application.css.scss，然后将 @import 删除，例如：

@import "frameworks";
@import "bootstrap-responsive";