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已經是被壓縮了的,如果對這個文件進行壓縮,運行里面相關方法會報錯

 

寫的有點亂,只是記錄下

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM