爲什麼我的樣式包在ASP.NET MVC 4中不能正確呈現？

所以我是ASP.NET MVC 4的新手（嗯，我用了3個）。爲什麼我的樣式包在ASP.NET MVC 4中不能正確呈現？

無論如何，在我的BundleConfig.cs文件中，我試圖加載Twitter Bootstrap css文件和一個額外的site.css文件。

但是隻渲染了site.css文件。我已經證實，引導css文件確實是在正確的地方（Content文件夾），並在相同的位置的site.css

bundles.Add(new StyleBundle("~/Content/css").Include(
      "~/Content/bootstrap.min.css", 
      "~/Content/bootstrap-responsive.min.css", 
      "~/Content/site.css"));

編輯

OK，這不是我的首選的方式，但安德烈Drynov建議我嘗試：

@import url("bootstrap.min.css") 
body{background: #e8e6da;padding-top:60px;padding-bottom:40px;} 
@import url("bootstrap-responsive.min.css")

但這並不行。我改變了site.css到上面，但現在背景主體顏色甚至不起作用。如果我刪除@imports，背景是正確的顏色。

EDIT 2

我不明白這一點，但補充說：

bundles.IgnoreList.Clear();

要我包文件固定它。嗯。不知道我明白。但是我能夠從site.css中刪除@imports。

奇怪。

來源

2012-09-21 cbmeeks

如果您查看開發人員工具中的「網絡」選項卡，是否獲得了這些CSS文件？ – AFD

沒有。我看到site.css和一些我加載的JS。 – cbmeeks

如何引用佈局或視圖中的包？ –

的默認行爲是IgnoreList忽略任何精縮腳本。

您可以從名稱中刪除'.min'，也可以清除IgnoreList。

來源

2012-11-25 22:08:54 paul

這是正確的答案。 Bundles會自動使用縮小的版本，所以不要在腳本名稱中包含它，只需使用'bootstrap.css'，並將未縮小的版本保存在內容目錄中。 –

我不使用引導束（作爲例外），但其縮小的版本，所以這對我的作品：

<!DOCTYPE html> 
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> 
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> 
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> 
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>@ViewBag.Title</title> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
    <meta name="viewport" content="width=device-width"> 
    <link rel="stylesheet" href="@Url.Content("~/Content/bootstrap.min.css")"> 
    <style> 
     body { 
      padding-top: 60px; 
      padding-bottom: 40px; 
     } 
    </style> 
    <link rel="stylesheet" href="@Url.Content("~/Content/bootstrap-responsive.min.css")"> 
    @Styles.Render("~/Content/less") 
    @Scripts.Render("~/bundles/modernizr") 
</head> 
<body>

與內嵌樣式的部分是從http://www.initializr.com/的頂部導航欄中，如果你不需要它，只需刪除。

或者，你可以做同樣的在你的styles.css文件：

@import url('bootstrap.min.css'); 

body { 
    padding-top: 60px; 
    padding-bottom: 40px; 
} 

@import url('bootstrap-responsive.min.css'); 

You CSS Code below

來源

2012-09-21 15:41:41 AFD

嗯，這當然有用，但我希望使用捆綁。我非常喜歡使用捆綁的想法。感覺'Rails'喜歡'給我。 :-) – cbmeeks

在您的更新中...將其導入site.css甚至更好。除非有人能夠告訴我如何在捆綁中使用它，否則我會使用該方法。 – cbmeeks

@import網址無效。查看更新。謝謝 – cbmeeks

只是爲了讓別人知道着在這個漫長的線程很容易地找到可行的解決方案是誰，我有相同的問題，我解決它以同樣的方式在實際問題的底部找到編輯建議！

我開始一個新項目MVC4 Web應用程序，上面顯示在完全相同的代碼引導束創建路線：

bundles.Add(new StyleBundle("~/Content/css").Include(
      "~/Content/bootstrap.min.css", 
      "~/Content/bootstrap-responsive.min.css", 
      "~/Content/site.css"));

但由於未知的原因，它是不加載。最後我放棄了，決定谷歌，並找到了這個網頁。

我試圖加入以下作爲在BundleConfig.cs文件的第一行。重新編譯，一切開始工作，現在正在加載樣式。

bundles.IgnoreList.Clear();

也許這有助於某人。

來源

2013-02-09 16:56:10

這與Paul上面的答案一致，它指出'.min'文件在默認情況下被忽略。他還建議清除IgnoreList或重命名文件以刪除.min。 – JLRishe

Thx a LOT！ IgnoreList是原因...爲什麼？ –

由於保羅正確指出，捆綁設置爲自動忽略'min'文件。但是忽略這個規則是一個不好的做法，請參考此回答Bundler not including .min files以獲得更好的解決方案（同時檢查第一個和第二個答案）。

來源

2013-12-31 09:29:55 FredericoR

爲什麼我的樣式包在ASP.NET MVC 4中不能正確呈現？

回答

相關問題