如何将 .CSS 文件与 Sass（或其他工具）合并？ [复制]答案

【问题标题】：How to merge .CSS files with Sass (or other tool)? [duplicate]如何将 .CSS 文件与 Sass（或其他工具）合并？ [复制]
【发布时间】：2011-08-06 23:51:32
【问题描述】：

我可以使用 Sass 将多个 .SCSS 或 .SASS 输入文件编译成一个使用 @import 的单个 .CSS 输出文件，如 here 所述。

如果我使用 @import 包含普通的 .CSS 文件，它们不会被合并。输出的 .CSS 文件仍然包含 @import 指令。这是有道理的。

但是有没有办法可以覆盖这种行为，也许是命令行切换到 Sass 编译器？换句话说，我可以告诉 Sass 尝试强制合并 @import "foo.css";，就好像它是一个 .SCSS 文件一样？

我正在使用包含许多 .CSS 文件的第三方库 (Google Closure Library)。我在我的项目中只使用了其中的一些。我宁愿避免手动解决方案，例如将所有这些文件重命名为 .SCSS（尽管这似乎可行）或将它们的内容复制并粘贴到我的 .SCSS 文件中（也可以）。而且我不想在客户端将它们全部导入。我真的很希望 Sass 包含我“按原样”使用的几个 .CSS 文件并生成单个输出样式表。可能的？还有其他我应该看的工具吗？

【问题讨论】：

您可以使用任何服务器端脚本语言吗？我经常让服务器合并 CSS 和 JS 之类的东西，以允许更新 JS 库等。如果您能够走这条路并且可以提供脚本语言，我很乐意为您提供功能示例。
@Liam，我在服务器端使用 Ruby。

标签： css sass google-closure google-closure-library

【解决方案1】：

我还没有在 Sass 中找到这样做的方法。

我的解决方法是直接从其 URL 导入第三方库。当然，这只适用于通过 URL 提供的 CSS 库。它仍在导入多个文件，但至少我不必重命名文件或管理供应商 CSS 库的修改副本。

例子：

// ORIGINAL: locally managed, modified copy (bad), no @import in output (good)
@import 'my_modified_copy/closure/goog/css/common.scss';

// WORKAROUND: vendor-managed (good): @import in output (bad but acceptable)
@import 'http://closure-library.googlecode.com/svn/trunk/closure/goog/css/tab.css';

在发布之前，我可能会添加一个脚本以从供应商处获取当前版本并将所有 .css 文件重命名为 .scss 文件。但就目前而言，上述解决方法对于开发来说是可以接受的。

【讨论】：

【解决方案2】：

这可以在服务器端完成，如果可以的话，可以为您节省一些麻烦。由于您只是将文件合并在一起，而且它只是 CSS，因此信息中不应该有任何会损害您的网站的冲突。此外，随着框架的改进，这种方式使您可以灵活地更新 CSS。

Ruby 不是我选择的语言，但仍然非常可行地完成这里所需的一切。有一个用 Ruby 编写的工具，可以使用 CSS 和 JS 文件为您执行此操作。查看此博客文章以获取概要： http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool

我希望这对您有所帮助，如果您需要其他任何内容，请告诉我。

【讨论】：

谢谢，榨汁机看起来很酷。我可以试试看。
在您选择的语言中会选择哪些选项或工具？
在 C# 中，我有一个我不久前编写的脚本，当一个文件更新时，它会即时合并这些脚本。我将这个连接的文件存储在服务器上，而不是从浏览器中访问所有文件。在页面加载时，我根据存储在连接文件中的日期检查单独文件的标题，以查看是否发生了更新，需要从其外部部分重新编译文件。如果这应该在每次页面加载或给定时间间隔发生，或者如果它应该在站点内加载的下一页时强制发生，这将与 admin/CMS 中的参数挂钩。

【解决方案3】：

每个 CSS 文件也是一个有效的 SCSS.. 所以如果你更改需要“不可见”导入或合并到 _filename.scss 的文件，然后使用 @import "filename";（扩展可选）从主 scss 文件中 @import 它应该编译一个大的 CSS 里面没有 @import 语句

编辑添加：抱歉刚刚在浏览器崩溃后看到您的编辑.. 发现这不是您要查找的内容，我不知道其他方式

【讨论】：

这将起作用，但我正在寻找一种不需要我以任何方式（包括文件名和扩展名）修改 .CSS 文件的第三方库的解决方案。我想告诉Sass 编译器“我知道这些 .CSS 文件是有效的 .SCSS 文件，因此请照此处理。”
@jwfearn 刚刚添加了一个编辑.. 浏览器冻结并且没有及时看到您的编辑，抱歉！