如何使用Sass（或其他工具）合并.CSS文件？

Question

如何使用Sass（或其他工具）合并.CSS文件？

csssassgoogle-closuregoogle-closure-library

19

我可以使用 Sass，按照此处所述的方法，将多个 .SCSS 或 .SASS 输入文件编译成单个 .CSS 输出文件，并使用 @import。

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

但是，是否有一种方法可以覆盖这种行为，例如通过 Sass 编译器的命令行开关？换句话说，我能否告诉 Sass 强制合并 @import "foo.css";，就像它是一个 .SCSS 文件一样？

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

- jwfearn

你能使用任何服务器端脚本语言吗？我经常让服务器合并CSS和JS，以便更新JS库等内容。如果你能够采用这种方法，并且能够提供一个脚本语言，我很乐意为你提供一个功能示例。 - Liam

@Liam，我在服务器端使用Ruby。 - jwfearn

3个回答

3

我还没有找到在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文件。但目前来说，上述解决方法对于开发是可以接受的。

- jwfearn

2

如果可以的话，这个操作可以在服务器端完成，这样可以节省一些麻烦。由于您只是将文件合并在一起，并且只是 CSS，因此不应该有任何冲突会损害您的网站。此外，这种方法还为您提供了灵活性，以随着框架的改进更新 CSS。

Ruby 不是我首选的语言，但仍然非常适合在这里完成所有需要的工作。有一个用 Ruby 编写的工具可以帮助您处理 CSS 和 JS 文件。请查看此博客文章获取详细信息： http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool

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

- Liam

谢谢，Juicer看起来很酷。我可能会试一试。 - jwfearn

你会在你选择的编程语言中选用哪些选项或工具？ - jwfearn

在C#中，我写了一个脚本，可以在一个文件被更新时实时合并它们。我将这个合并后的文件存储在服务器上，而不是从浏览器中获取所有文件。在页面加载时，我会检查单独文件的头部与存储在合并文件中的日期是否有更新，以确定是否需要从其外部部分重新编译该文件。如果需要在每次页面加载时或在给定间隔内发生更新，或者如果需要在站点内下一页加载时强制执行，则可以将其连接到管理员/CMS中的一个参数中。 - Liam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- clairesuzy · Accepted Answer

每个 CSS 文件也都是有效的 SCSS，因此，如果您更改需要“隐形”导入或合并到 _filename.scss 的文件，则应使用 @import "filename";（扩展名可选）从主 SCSS 文件中导入。它将编译为一个大的 CSS 文件，其中没有 @import 语句。

编辑以添加: 抱歉，刚看到您的编辑，并且发现这不是您要寻找的内容，我不知道其他方法。