使用MVC Bundle後，CSS參考的相對路徑不對了??

MVC Bundle相當好用，可以把一堆css, js包在一起

bundles.Add(new StyleBundle("~/css/main").Include(
    "~/Content/Layout/main.css"，
    "~/Content/bootstrap.css",
    "~/Content/font-awesome.css",
    "~/Content/flags.css"));

bundles.Add(new ScriptBundle("~/js/main").Include(
    "~/Scripts/jquery-{version}.js",
    "~/Scripts/bootstrap.bundle.js",
    "~/Scripts/Layout/main.js",
    "~/Scripts/TreeTable/javascript.js"));

只要在cshtml裡寫進以下語法, 就可以使用這一堆的css,js, 還有其它優點可以再上網查查

@Styles.Render("~/css/main")
@Scripts.Render("~/js/main")

但我最近在使用FlagSprites這個顯示國旗的小套件的時候

發現Release到Server上後沒辦法顯示出來

追了一下發現 flags.css 的內容包含了一個相對路徑

.flag {
	width: 16px;
	height: 11px;
	background:url(flags.png) no-repeat
}

但實際引用的位址卻是這個，當然找不到圖片

解決方法1

使用CssRewriteUrlTransform

bundles.Add(new StyleBundle("~/bundles/css").Include(
    "~/Content/bootstrap.css",
    "~/Content/font-awesome.css").Include(
    "~/Content/flags.css", new CssRewriteUrlTransform()));

它會將css裡的路徑都轉成根目錄的相對路徑

但這個方法如果程式不是掛在根目錄下，而是某個站台下的話，
路徑還是一樣會有問題

解決方法2

使用套件BundleTransformer.Core
先從nuget下載

修改BundleConfig.cs

using BundleTransformer.Core.Transformers;

var stylebundle = new StyleBundle("~/bundles/css").Include(
    "~/Content/bootstrap.css",
    "~/Content/font-awesome.css"
    "~/Content/flags.css"));
stylebundle.Transforms.Add(new StyleTransformer());
bundles.Add(stylebundle);

這套件會判斷程式掛載的位置來修改css的路徑

所以只要用上述步驟打包css檔，即可正常載入至網頁中,
也不用考慮網站掛在哪個站台底下，相當方便。

結束，收工!!

 參考 .Net 蛤什麼?