将开发 CSS 中的导入合并到 1 个文件中用于生产答案

【问题标题】：Combining imports in development CSS into 1 file for production将开发 CSS 中的导入合并到 1 个文件中用于生产
【发布时间】：2012-06-16 11:07:20
【问题描述】：

我可以使用什么东西来快速将多个 CSS 导入合并到一个 CSS 文件中。

例如，假设我有一个主要的 styles.css 文件，在开发过程中有大量的导入：

@import url('normalize.css');
@import url('1.css');
@import url('2.css');
...
@import url('10.css');

我在开发过程中将它们分开只是为了我自己的理智。

我想在生产过程中将 HTTP 请求最小化为 1 个样式文件，而不是 11、12 等。

那么，除了手动复制/粘贴到一个文件之外，还有什么东西可以将这些导入文件放入一个文件中？

LESS 或 SASS 会做这样的事情吗？

【问题讨论】：

值得指出的是，尽量减少 HTTP 请求是好的，但缓存更好。如果浏览器缓存了normalize.css，则不必发出HTTP 请求。您可能希望拥有一个 CSS 文件，其中包含用于每个页面的样式，而另一个具有页面特定样式的 CSS 文件。这样，您的后续页面可以使用缓存的基本样式，并且只下载少数特定页面的样式。

标签： css optimization sass less

【解决方案1】：

LESS 和 SASS 可以做到这一点以及更多。有许多服务器端方法可以将您的 css 文件整理到一个文档中（使用 js 也可以做到这一点，但我不建议这样做，因为关闭 js 会丢失您的样式）

如果我没记错的话，Yahoo YUI 压缩器/Rhino 也会这样做：http://developer.yahoo.com/yui/compressor/#work

如果您检查全局选项，则此选项适合您：

-o 输出文件

  Place output in file outfile. If not specified, the YUI Compressor will
  default to the standard output, which you can redirect to a file.
  Supports a filter syntax for expressing the output pattern when there are
  multiple input files.  ex:
      java -jar yuicompressor.jar -o '.css$:-min.css' *.css
  ... will minify all .css files and save them as -min.css

【讨论】：

不幸的是，yui-compressor 不这样做。
@JoachimBreitner 你能详细说明一下吗？我没有使用 YUI 压缩器来连接文件，但文档似乎很清楚这个选项。
不确定这是否在评论中正确呈现：$ cat test2.css @import url(test.css); $ cat test.css a {font-weight:heavy} $ yui-compressor test2.css @ import url(test.css); 这是版本 2.4.7。

【解决方案2】：

使用 YUI Compressor 最简单的方法是下载二进制文件，这需要 Java，并在命令行上执行它们：

java -jar yuicompressor-x.y.z.jar foo.js | foo.min.js

但是，您可以在部署时以编程方式执行此操作。如果您正在使用库像 Sprockets 或更少，他们会为你做这件事。否则，有几个接口 YUI Compressor 的库，例如 Sam Stephenson 的 Ruby-YUI-compressor gem 或 Jammit 库。

【讨论】：

不幸的是，yui-compressor 不内联@import。

【解决方案3】：

基于 yuicompressor 的 css-compressor 就是这样做的：

https://github.com/samilyak/css-compressor

【讨论】：