将css外部链接合并为一个链接

Question

我正在尝试将所有 css 链接加起来。因此，它有助于更​​快地加载页面。

我使用的链接是：

<link rel="stylesheet" href="index_files/stylesheet.css" type="text/css">
<link rel="stylesheet" href="/index_files/goStyle.css" type="text/css"/>
<link rel="stylesheet" href="/index_files/jquerylogin.css" type="text/css">
<link rel="stylesheet" href="/index_files/jquery-ui.css">

根据研究，建议将所有 css 合并到一个文件中，但我遇到了相同类名影响不同标签的问题。

我尝试添加如下链接：

<link rel="stylesheet" href="index_files/stylesheet.css+goStyle.css+jquerylogin.css+jquery-ui.css" type="text/css">

但没有运气。

请有人帮我解决这个问题。

Answer 1

请阅读本页：Combine and Minify Multiple CSS / JS Files

查看 minify - 它允许您将多个 js、css 文件合并到 一个只需将它们堆叠到一个 url 中，例如

<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>

我们已经使用它多年了，它做得很好，而且可以即时完成 （无需编辑文件）。

Answer 2

如果你将所有的 CSS 以相同的顺序组合成一个 CSS，它的效果就像单独包含一样。

按相同的顺序组合所有 CSS 文件，例如：

/* stylesheet.css */

/*### stylesheet CSS Goes Here ###*/

/* goStyle.css */

/*### goStyle CSS Goes Here ###*/

/* jquerylogin.css */

/*### jquerylogin CSS Goes Here ###*/

/* jquery-ui */

/*### jquery-ui CSS Goes Here ###*/

Answer 3

使用 CSS 导入规则

<link rel="stylesheet" type="text/css" href="/css/Combined.css" />

组合的 Css 在里面你可以像下面这样导入所有其他的 css

@import url('/css/s1.css');
@import url('/css/s2.css');
@import url('/css/s3.css');

更多信息请阅读下面的文章

http://www.cssnewbie.com/css-import-rule/#.U2CN9Pk70dE