如何使用 @import 连接 CSS 文件？

Posted 2023-02-24

【中文标题】如何使用 @import 连接 CSS 文件？

【英文标题】：How can I concatenate CSS files using @import?

【发布时间】：2012-03-25 23:09:53

【问题描述】：

我们正在构建一个需要非常模块化 CSS 的大型网站。我们遇到的问题是我们喜欢使用 @import 语句，因为它非常简洁，但主要缺点是性能（所有引用的 CSS 文件都是同步加载的，即不是并行加载）。

有谁知道使用 php（甚至 .htaccess）查找通过 @import 引用的任何 CSS 文件然后生成单个 CSS 文件的方法？

我查看了大量示例（其中一些可以在此处看到）：http://robertnyman.com/2010/01/19/tools-for-concatenating-and-minifying-css-and-javascript-files-in-different-development-environments/，但它们都不适用于@import。

谢谢。

【问题讨论】：

您可以考虑将缩小作为@import 的替代方案。作为构建过程或其他东西的一部分（然后将其缩小），生成扫描 CSS 文件并为您进行连接的东西并不难。

就个人而言，我认为你最好使用像 minify 这样的东西。 code.google.com/p/minify

我认为您最大的问题是您希望能够拉入一张床单，让他们拉入其他床单，对吗？使用缩小的东西，您只需将所有工作表发送到解析器，它就会吐出一个文件。如果每个文件中都有@import，它们仍然会以相同的方式加载。无需依赖工作表相互拉入，只需将所有单独的工作表传递给 minify 解析器。

我已将@pomeh 标记为正确答案，因为它是迄今为止我拥有的最佳解决方案。但要明确一点（如果其他人确实有更好的解决方案）是我们不想依赖于诸如 sass 或更少的预处理器，因为不能保证它们将来会出现在哪里使用 PHP 构建东西更具未来性（在我们看来），这也意味着我们不必使用 less/sass 来编译 import 语句（因为我们不相信预处理器非常适合我们和它生成的代码）。

这是一个完整的样式首选项，因为我们可以在页面中有多个 ，然后让 Google modpagespeed 模块将链接连接并缓存到一个中（这是我们目前所做的） .但是从开发的角度来看，在页面中使用一个链接并使用不同的 @import 语句看起来和感觉都更加简洁。我个人想不出 PHP 可以读取 文件然后提取导入的 css 文件的任何有效方式 - 但仍然有兴趣知道是否有人尝试过

【参考方案1】：

Less 可以做到这一点：http://lesscss.org/#-importing

也许也很sass，但我不确定

【讨论】：

异步加载导入的负载少吗？

你是什么意思？没看懂

确实如此。可以在源码中找到：“// 异步导入文件”后面跟着导入函数，按预期有回调。

它不会同步或异步导入，它将文件连接成一个，然后您将 那个 文件同步加载到您的页面中..

【参考方案2】：

使用资产管理 CSS 和 JavaScript 创造了奇迹。使用 Symfony2 时默认建议使用它，但可以在 PHP 中用作独立库。如果使用得当，它将让您在调试和连接/缩小生产中的所有内容时以原始格式使用文件。

https://github.com/kriswallsmith/assetic

@import 我没有遇到任何问题。

如果你喜欢的话，它还可以让你使用那些替代的 CSS 语言。

【参考方案3】：

使用指南针。它将所有样式编译到一个文件中。

compass-style.org

【参考方案4】：

您可以使用 LESS 的 PHP 版本。它会将样式文件中的样式和导入的样式处理到服务器本身的一个文件中。你也可以最小化它。然后将其存储在缓存中。这将使 LessPHP 编译器能够查看处理后的文件是否已经在缓存中，以及是否有任何涉及的样式文件已被更改。如果没有任何变化，它将简单地返回缓存的样式文件。您需要在标记中做的唯一区别是将<link> 标记中的.css 更改为.less。这也将帮助您编写 LESS css，这是一个奖励。

in the official website 和 GITHub 提供了有关如何安装 LessPHP、自动编译和缓存 LESS 文件的详细文档。