SASS:在开发中将 CSS 文件分开并在生产中合并它们

Question

我正在使用 Grunt 和 SASS。我目前正在使用 grunt-contrib-compass插件。

我的目标看似简单，实则很难。

• 在开发过程中，我希望将我的 CSS 编译到单独的文件中(因为开发工具、watch 的速度等)
• 为了生产，我希望将所有 CSS 合并为一个。

但是使用 concat 任务并不能完成这项工作。

当我有 @import 语句并且 SASS 分别编译每个文件时，这会在不同的文件中一遍又一遍地从供应商库(如 Bootstrap 或 Compass 插件)输出相同的 CSS。在开发中这很好。当我concat 用于生产的 CSS 文件时，尽管它会生成一个包含重复 CSS 的相当大的文件。

我应该如何配置 Grunt 并使用 @import 语句来避免这种情况发生？

Answer 1

不是一个确切的答案，而是一个替代的解决方案。

对于开发工具的使用，我建议研究 .map 文件。这将允许您拥有一个编译和缩小的 css 文件，但是当您打开开发人员工具时，您可以看到样式在原始 sass 文件中的位置。

• 有关 grunt plugins GitHub page 的详细信息.
• 关于 Sass and source maps 的指南.

希望对您有所帮助。