将多个css文件合并为一个

时间:2013-04-20 00:58:03

标签: css joomla joomla2.5

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

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

我还尝试了其他组件,例如jch optimizerjbetolo,但没有成功!

有没有人知道可以为我做这项工作的组件或插件?或者其他一些东西,我也试过一些脚本在.htaccess中合并,但也没有成功。

3 个答案:

答案 0 :(得分:0)

您可以使用@import url'file'将每个css文件合并到一个文件中,然后只在主页中包含一个文件。

e.g。在我的网站

@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

答案 1 :(得分:0)

也许Factor CSS可以帮到你吗?通过它运行您的组合文件,看看是否有所作为。但是不要忽视免责声明,该声明表明当样式表依赖于规则的顺序时,它可能无法正常工作。这就是级联StyleSheets 的本质。

来自About.com

的样式表的引用
  

样式表旨在通过一系列样式级联,例如a   瀑布河。河里的水击中了所有的岩石   瀑布,但只有底部的影响恰好在哪里   水会流动。

当您说组合样式表时,它会弄乱您的网站。考虑一下添加文件的顺序。结合脚本的自动样式表永远不会知道你希望最终结果看起来如何,它所能做的只是拿走你所拥有的东西,并根据一组预先定义的指令将它组合起来,而不是基于它最终看起来有多好。因此,请确保输入正确,文件按正确的顺序组合。

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

答案 2 :(得分:0)

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

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

RokBooster非常受欢迎。