将多个css文件合并为一个答案

【问题标题】：Combine multiple css files in one将多个css文件合并为一个
【发布时间】：2013-04-13 11:39:48
【问题描述】：

我有这个 Joomla！我已经设置了一个 yoo 主题模板，但是我的网站非常慢，因为该模板有 30 个外部 CSS 文件和大约 20 个脚本文件。

我已经设法将所有 JavaScript 文件与组件 ScriptMerge 合并为一个，但对于 CSS，该组件无法正常工作，因为当我将所有 CSS 文件合并为一个时，它会弄乱我的网站。

我也尝试过其他组件，例如 jch optimizer 和 jbetolo，但没有成功！

有人知道可以为我完成这项工作的组件或插件吗？或者其他的可能，我也尝试了一些脚本来合并.htaccess，但也没有成功。

【问题讨论】：

标签： css joomla joomla2.5

【解决方案1】：

我知道这个Q是很久以前发布的，但是由于我曾经遇到过这种问题，我想我可以分享一个链接到我在为Joomla创建模板时经常使用的这两个任务管理器，即：

Grunt
Gulp

一个简单的 grunt 任务可以在瞬间组合你的 CSS （见下面的例子）

...
cssmin: {
    target: {
        files: {
            'css/output.css': [
                'style1.css',
                'style2.css'
            ]
        }
    }
}
...

干杯！

【讨论】：

【解决方案2】：

您可以使用@import url'file' 将每个 css 文件包含在一个文件中，然后将一个文件包含在您的主页中。

例如在我的网站上

@import url("nav.css");
@import url("popup.css");
@import url("latestPosts.css");
@import url("home.css");

此代码放在common.css 的顶部，然后common.css 只是包含在index.php 中

可能想看看这里： http://www.w3.org/TR/CSS21/cascade.html#at-import

【讨论】：

是的，但是每次导入都会对该文件发出单独的 http 请求？
是的，它为每次导入发出单独的请求，但在初始加载后它们应该被缓存。

【解决方案3】：

也许Factor CSS可以帮助你？通过它运行您的组合文件，看看是否有区别。但是不要忽视免责声明，它指出当样式表依赖于规则的顺序时它可能无法正常工作。这就是层叠样式表的本质。

About.com 对样式表的引用

样式表旨在通过一系列样式级联，例如瀑布上的河流。河里的水击中了所有的岩石瀑布，但只有底部的瀑布会影响确切的位置水会流动。

当您说组合样式表时会弄乱您的网站。考虑一下添加文件的顺序。自动样式表组合脚本永远不会知道您希望最终结果如何，它所能做的就是根据预先定义的一组指令将您拥有的内容组合起来，而不是根据最终看起来有多好.所以请确保输入正确，并且文件以正确的顺序组合。

这是cascading order and inheritance in stylesheets 上的一个有趣链接，可能会有所帮助。

【讨论】：

【解决方案4】：

这是允许加载各种扩展的模板驱动 CMS 的常见问题。

Joomla! extensions directory 有一整节用于增强“Site Performance”，还有一系列流行的扩展用于组合 CSS 和 Javascript 文件。

RokBooster 相当受欢迎。

【讨论】：

【解决方案5】：

如果你喜欢编码......这里有一个解决方案。

您可以通过使用类似的东西创建一个 php 文件，将您的 css 文件动态地捆绑为一个：

<?php
# File combcss.php
readfile("stylesheet1.css");
readfile("stylesheet2.css");
?>

然后你可以这样调用你的样式表：

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

【讨论】：