Question

在HTML文件中，我有以下css文件。

<link  type="text/css" href="reset.css,css/style.css,css/responsive.css,css/custom.css,css/fonts.css,css/jquery-ui.css" rel=stylesheet>

当我运行gtmetrics工具进行页面优化时，它会说

此页面有7个外部样式表。尝试将它们合并为一个。

我尝试将它们合并为一个

{{1}}

但是css没有加载，请告诉我如何将它们组合成一个。

Answer 1

查看https://github.com/mrclay/minify

您可以组合多个CSS / JS文件，而无需将它们物理组合。

示例：<script src="/css/style.css,css/main.css"></script>

Answer 2

创建一个新的css文件，并将其命名为main.css。

将以下内容作为main.css的内容：

@import url("style.css");
@import url("css/responsive.css");
@import url("css/custom.css");
@import url("css/fonts.css");
@import url("css/jquery-ui.css");

最后，您只需要将html文件仅链接到main.css。

您提供的结果代码如下：

<link href="main.css" rel=stylesheet>
<link rel="shortcut icon" href="">

请注意，<link rel="shortcut icon" href="">用于添加 favicon ，与链接css文件略有不同。

如何将多个CSS组合成一个

2 个答案: