MVC中用 BundleCollection 壓縮CSS時圖片路徑問題

MVC中有個專門提供JS和CSS壓縮的類，BundleCollection，其實這個類也能夠在asp.net中用，

關於BundleCollection類的詳細推薦個地址：http://www.cnblogs.com/lifeil/archive/2013/03/11/2954071.html

我這裏只是記錄下使用過程當中遇到的兩個小問題

1.css被壓縮後，裏面圖片路徑文件的問題

咱們能夠看到MVC中 BundleConfig這個類裏，都是自動生成的好多須要壓縮的JS和CSS

bundles.Add(new StyleBundle("~/Content/Css").Include("~/Content/layout.css", "~/Content/wysiwyg.css"));

view在頭部這樣寫就能夠導入  ~/Content/layout.css 和~/Content/wysiwyg.css的CSS了

@Styles.Render("~/Content/Css")

照上面方法，我繼續在後面加了個CSS，就是站點的皮膚，注意藍色位置，已經不在Content文件下級了

bundles.Add(new StyleBundle("~/Content/Css").Include("~/Content/layout.css","~/Content/wysiwyg.css", "~/Content/themes/blue/styles.css"));

這樣在開發的時候沒什麼問題，由於在開發模式下CSS和JS是沒有被壓縮的，可是我把網站發佈後就出問題了，

Content/themes/blue/styles.css 裏圖片都是這樣寫的 background: url(img/bg_navigation.png)，有人會說，爲何不寫 /Content/themes/blue/img/bg_navigation.png,若是在MVC用到了區域，這樣寫路徑也會就會出問題

如何在不發佈網站的狀況下測試壓縮CSS呢？在BundleConfig 類里加上

BundleTable.EnableOptimizations = true;

或修改Web.config

<compilation debug="false" targetFramework="4.0">

看看壓縮先後的CSS路徑終於發現問題了

壓縮前：

壓縮後：

原來，咱們寫的 new StyleBundle("~/Content/Css") 會影響到壓縮後的路徑

解決辦法：

對於皮膚的CSS，咱們重寫一個聲明

bundles.Add(new StyleBundle("~/Content/themes/blue/Css").Include("~/Content/themes/blue/styles.css"));

這樣圖片就能找到了

2.壓縮javascript文件的是時候，若是文件名帶有 .min竟然不壓縮，連文件都不導入，例如

bundles.Add(new ScriptBundle("~/bundles/easyui").Include("~/Scripts/my/jquery.easyui.min.js"));

這樣的文件在壓縮後不會被導入，解決辦法

改JS名字，去掉min 或 在view裏寫 @Scripts.Render("~/Scripts/my/jquery.easyui.min.js")，這樣就不會被壓縮了

其實帶min已是被壓縮了的，若是對這個文件進行壓縮，運行裏面相關方法會報錯

寫的有點亂，只是記錄下

 

 

轉自：http://www.cnblogs.com/linfei721/archive/2013/05/03/3056497.html