2012-09-21 17 views
41

तो मैं एएसपी.नेट एमवीसी 4 के लिए नया हूं (ठीक है, मैंने 3 का उपयोग किया)।एएसपी.नेट एमवीसी 4 में मेरी स्टाइल बंडल सही ढंग से क्यों प्रस्तुत नहीं कर रही हैं?

वैसे भी, मेरी BundleConfig.cs फ़ाइल में, मैं ट्विटर बूटस्ट्रैप सीएसएस फ़ाइलों और एक अतिरिक्त site.css फ़ाइल लोड करने की कोशिश कर रहा हूं।

लेकिन केवल साइट.css फ़ाइल प्रदान की जाती है। मैं पुष्टि की है कि बूटस्ट्रैप सीएसएस फ़ाइलें सही जगह (सामग्री फ़ोल्डर) में वास्तव में कर रहे हैं और site.css

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

संपादित

ठीक रूप में एक ही स्थान में हैं, यह नहीं है मेरी पसंदीदा तरीका लेकिन आंद्रेई ड्राईनोव ने सिफारिश की कि मैं कोशिश करता हूं:

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

लेकिन यह काम नहीं करता है। मैंने साइट.css को उपर्युक्त में बदल दिया लेकिन अब पृष्ठभूमि शरीर का रंग भी काम नहीं करता है। अगर मैं @imports को हटा देता हूं तो पृष्ठभूमि सही रंग है।

संपादित 2

मैं समझ नहीं करते हैं लेकिन जोड़ने:

bundles.IgnoreList.Clear(); 

मेरी बंडलों के लिए फ़ाइल यह तय की। हममम। पक्का नहीं मै समझ गया। लेकिन मैं site.css से @imports को हटाने में सक्षम था।

अजीब।

+0

यदि आप डेवलपर टूल में नेटवर्क टैब देखते हैं, तो क्या उन सीएसएस फ़ाइलों को प्राप्त किया जाता है? – AFD

+0

नहीं। मैं साइट.css और कुछ जेएस जो मैं लोड करता हूं देखते हैं। – cbmeeks

+0

आप अपने लेआउट में बंडल का संदर्भ कैसे देते हैं या देखते हैं? –

उत्तर

84

डिफ़ॉल्ट व्यवहार है।

आप या तो उनके नाम से '.min' को हटा सकते हैं, या IgnoreList को साफ़ कर सकते हैं।

+0

यह सही उत्तर है। बंडल स्वचालित रूप से minified संस्करण का उपयोग करेंगे, इसलिए स्क्रिप्ट नाम में शामिल न करें, बस इसके बजाय 'bootstrap.css' का उपयोग करें, और अपनी सामग्री निर्देशिका में अन-minified संस्करण रखें। –

2

मैं बूटस्ट्रैप के लिए बंडलों (एक अपवाद के रूप में), लेकिन इसके minified संस्करणों का उपयोग नहीं करते, तो यह मेरे लिए काम करता है:

<!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> 

इनलाइन शैली के साथ भाग शीर्ष NavBar के लिए http://www.initializr.com/ से है, अगर आपको इसकी आवश्यकता नहीं है, तो बस हटा दें।

फिर, आप अपने styles.css फाइल में भी ऐसा ही कर सकते हैं: IgnoreList किसी भी न्यूनतम किया गया स्क्रिप्ट को अनदेखा करने के लिए

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

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

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

You CSS Code below 
+0

ठीक है कि निश्चित रूप से काम करता है लेकिन मैं बंडलों का उपयोग करने की उम्मीद कर रहा था। मुझे वास्तव में बंडलों का उपयोग करने का विचार पसंद है। मुझे 'रेल की तरह' लगता है। :-) – cbmeeks

+0

आपके अपडेट पर ... साइट.css में इसे आयात करना भी बेहतर है। मैं उस विधि का उपयोग तब तक करूंगा जब तक कि कोई मुझे बंडल में इसका उपयोग कैसे न कर सके। – cbmeeks

+0

@import url काम नहीं किया। अद्यतन देखें। धन्यवाद – cbmeeks

15

किसी और को यह जानने के लिए कि इस लंबे धागे में आसानी से कामकाजी समाधान कौन नहीं ढूंढ सकता है, मेरे पास एक ही समस्या थी और मैंने इसे वास्तविक प्रश्न के नीचे पाए गए संपादनों में सुझाए गए तरीके से हल किया!

मैं एक नई परियोजना MVC4 वेब अनुप्रयोग, ऊपर दिखाए गए ठीक उसी कोड में बूटस्ट्रैप बंडलों के लिए बनाई गई मार्गों शुरू कर दिया:

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

लेकिन अज्ञात कारणों के कारण, यह लोड नहीं किया गया था .. अंत में मैं छोड़ दिया और इसे गूगल करने का फैसला किया और यह पृष्ठ पाया।

मैंने निम्नलिखित को BundleConfig.cs फ़ाइल में पहली पंक्ति के रूप में जोड़ने का प्रयास किया। पुन: संकलित और सबकुछ काम करना शुरू कर दिया और अब शैलियों को अब ठीक से लोड किया जा रहा था।

bundles.IgnoreList.Clear(); 

शायद यह किसी की मदद करता है।

+1

यह पॉल के उत्तर के साथ संगत होगा जो बताता है कि '.min' फ़ाइलों को डिफ़ॉल्ट रूप से अनदेखा किया जाता है। वह या तो IgnoreList को साफ़ करने या .min को हटाने के लिए फ़ाइलों का नाम बदलने का सुझाव देता है। – JLRishe

+0

Thx बहुत कम! अनदेखा सूची कारण था ... क्यों? –

1

जैसा कि पॉल सही ढंग से कहा गया है, स्वचालित रूप से 'न्यूनतम' फ़ाइलों को अनदेखा करने के लिए सेट के रूप में बंडल। लेकिन इस नियम को अनदेखा करना एक बुरी आदत है, कृपया इस उत्तर Bundler not including .min files को बेहतर समाधान के लिए देखें (पहले और दूसरे उत्तरों दोनों की जांच करें)।

संबंधित मुद्दे