एक साथ कम और सीएसएस फाइलों को बंडल करना

Question

मुझे लगता है कि बंडलिंग का उपयोग उन फ़ाइलों के समूह को समूहित करने के लिए किया जाना चाहिए जिन्हें आप ब्राउज़र में एक ही डिलीवरी में एक साथ उपयोग करते हैं। यह मेरी जड़ शैली के लिए उदाहरण के लिए मतलब होगा मैं निम्नलिखित की तरह कुछ करना चाहते हैं:

var bundle = new StyleBundle("~/Content/style").Include(
    "~/Content/mystyle.less", 
    "~/Content/bootstrap.css", 
    "~/Content/bootstrap-responsive.css"); 
bundle.Transforms.Add(new LessTransform()); 
bundle.Transforms.Add(new CssMinify()); 
bundles.Add(bundle);  

लेकिन इस custom transform technique for bundling less files साथ बहुत अच्छी तरह से काम करने के लिए के रूप में ऐसा लगता है कि यह बंडलों पूर्व के सभी प्रतीत नहीं होता LessTransform को पास करने से पहले एक सीएसएस फ़ाइल में फ़ाइलें। मैं यह कह सकता हूं कि यह विधि केवल तभी काम करती है जब आप अपनी सभी कम फ़ाइलों को एक साथ जोड़ते हैं।

क्या बंडलों को एक ही बंडल में कम और सीएसएस फ़ाइलों दोनों को अनुमति देने का कोई तरीका है?

Answer 1

मेरे पास इसमें कुछ और नजर आया और स्टाइलबंडल के बजाय बंडल का उपयोग करने की कोशिश की लेकिन अभी भी समस्याएं थीं। मुझे लगता है कि मुद्दा विशेष रूप से bootstrap.css फ़ाइल के साथ करना है जिसमें कुछ वाक्यविन्यास हैं जो कम पसंद नहीं करते हैं।

Answer 2

मेरा मानना ​​है कि सभी सीएसएस मान्य कम (लेकिन सभी वैध सीएसएस कम है) है

तो LessTransform अपने बूटस्ट्रैप सीएसएस फ़ाइलों के लिए लागू किया कोई फर्क नहीं करना चाहिए है।

यह अभी भी ब्राउज़र को वितरित करने के लिए सभी फ़ाइलों को एक सीएसएस फ़ाइल में बंडल करेगा।

वहाँ केवल डिजाइन समय के दौरान एक प्रदर्शन समस्या हो सकती है।

सही आउटपुट अभी भी उत्पादित किया जाएगा और कैशिंग किसी भी रन-टाइम प्रदर्शन समस्याओं को रोक देगा।

Answer 3

हाँ आप सही हैं, ट्रांसफॉर्मर कनवर्टर के साथ पास करने से पहले सभी सीएसएस/कम सामग्री को जोड़ता है। उस ने कहा, कनवर्टर कम और सीएसएस दोनों की उपस्थिति को चकित नहीं करना चाहिए, क्योंकि आप हमेशा कम स्टाइलशीट के भीतर मानक सीएसएस शामिल कर सकते हैं।

ऐसा लगता है कि आप StyleBundle ऑब्जेक्ट का उपयोग कर रहे हैं जिसमें पहले से ही एक ट्रांसफॉर्मर संबद्ध है। के रूप में मैं अपने config में करते हैं, इस तरह एक सामान्य Bundle उपयोग करके देखें:

var customStyles = new Bundle("~/bundle/style/css") 
         .Include("~/Content/normalize.css","~/Content/*.less"); 
bootstrapStyles.Transforms.Add(new LessTransform()); 
bootstrapStyles.Transforms.Add(new CssMinify()); 
bundles.Add(customStyles); 

नीचे अपने स्वयं के जवाब के रूप में, bootstrap.css फ़ाइल के साथ मुद्दा नहीं है कि कम ट्रांसफार्मर यह पसंद नहीं है, लेकिन शायद @imports के लिए एक पथ मुद्दा, सुनिश्चित करें कि आपका कम ट्रांसफॉर्मर यह सुनिश्चित करने के लिए कुछ उपयोग करता है कि यह किसी भी निर्भरता स्टाइलशीट के उचित पथ को हल करता है।

Answer 4

मैं जानता हूँ कि यह एक पुरानी पोस्ट का एक सा है, लेकिन मैं अजीब कुछ है कि किसी को काम का हो सकता है देखा है ...

मैंने पाया कि Bundle वस्तु में हाइफ़न पसंद नहीं है सीएसएस फ़ाइल का नाम जब कम फाइलें भी शामिल हैं। अर्थात्:

var frontendStyles = new Bundle("~/bundles/frontend.main.css") 
      .IncludeDirectory("~/Content/less", "*.less") 
      .Include(
       "~/Content/ladda.css", 
       "~/Content/jquery.mobile.custom.structure.min.css", 
       "~/Content/jquery-ui.1.9.2.custom.css" 
      ); 

मेरे लिए काम नहीं करता है, लेकिन निम्न (jQueryUI फ़ाइल नाम के परिवर्तन) करता है:

var frontendStyles = new Bundle("~/bundles/frontend.main.css") 
      .IncludeDirectory("~/Content/less", "*.less") 
      .Include(
       "~/Content/ladda.css", 
       "~/Content/jquery.mobile.custom.structure.min.css", 
       "~/Content/jqueryui.1.9.2.custom.css" 
      ); 

तो, "~/Content/bootstrapresponsive.css" को "~/Content/bootstrap-responsive.css" से फ़ाइल नाम बदल रहा है बहुत अच्छी तरह से करने के लिए इस मुद्दे को सॉर्ट कर सकता है आप।