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 指南。

我希望这会有所帮助。