將多個css文件合併爲一個

我有這個Joomla！網站和我已經建立了一個yoo主題模板，但我的網站非常慢，因爲模板有30個外部CSS文件和大約20個腳本文件。將多個css文件合併爲一個

我已經成功地將所有JavaScript文件合併爲一個組件ScriptMerge，但對於CSS，組件並不像它應該那樣工作，因爲當我將所有CSS文件合併爲一個時，它會弄亂我的站點。

我也嘗試過其他組件，如jch optimizer和jbetolo但沒有成功！

有誰知道一個組件或插件可以爲我做這個工作嗎？或者別的什麼也許，我也試過一些腳本合併在.htaccess，但也沒有成功。

2013-04-20 Andrej

您可以使用@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

來源

2013-04-20 01:00:22 Colin747

是的，但每個導入都會爲該文件發出單獨的http請求？ – Andrej 2013-04-20 01:06:32

是的，它會爲每個導入單獨請求，但在初始加載之後，它們應該被緩存。 – Colin747 2013-04-20 01:11:02

也許Factor CSS可以幫助你出來嗎？通過它運行你的組合文件，看看是否有所作爲。但是請不要忽視免責聲明，聲明在樣式表取決於規則的順序時可能無法正常工作。這是級聯樣式表的性質。

在樣式表引自About.com

樣式表的目的是通過一系列的樣式級聯，像河水在瀑布。河中的水碰撞瀑布中的所有岩石，但只有底部的水影響水的流動。

當你說它混淆了你的網站，當你合併樣式表。想一想文件的添加順序。自動化樣式表組合腳本永遠不會知道您希望最終結果的外觀如何，它所能做的就是根據預先定義的一組指令來組合它，而不是基於它在最後看起來有多好。因此，請確保輸入正確並且文件按照正確的順序組合。

這是cascading order and inheritance in stylesheets上的一個有趣的鏈接，可能有幫助。

來源

2013-04-20 01:08:23

這是模板驅動CMS允許加載各種擴展的常見問題。

Joomla! extensions directory有一整段用於增強「Site Performance」，有一系列用於組合CSS和Javascript文件的流行擴展。

RokBooster相當受歡迎。

來源

2013-04-20 10:24:21 Craig

如果你喜歡進入編碼...這是一個解決方案。

你可以捆綁你的CSS文件合併成一個，動態，用類似的東西創建一個PHP文件：

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

然後你可以叫你的樣式表那樣：

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

來源

2015-09-10 14:13:58 GOZEN

哦，這屎真的有用嗎？ – MarksCode 2016-06-23 04:35:49

我知道這個Q的發佈方式回來的路上，但因爲我曾經有過這樣的問題，我想我可以分享一個鏈接，這兩個任務管理器我爲Joomla創建模板時，即經常使用：

Grunt
Gulp

一個簡單的任務咕嚕可以在瞬間結合你的CSS（見下例）

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

乾杯！

來源

2017-02-23 07:59:41 edwardmagbago

將多個css文件合併爲一個

回答

相關問題