वेबपैक

Question

से कम चर पास करना मैं स्वाभाविक रूप से कम लोडर को वेबपैक कॉन्फ़िगरेशन के भीतर कम चर पारित करने का प्रयास कर रहा हूं। किसी कारण से चर को पारित नहीं किया जा रहा है ठीक है। मैं सही वाक्यविन्यास नहीं समझ सकता।

परिवर्तनीय में गतिशील सामग्री है जो वेबपैक कॉन्फ़िगरेशन फ़ाइल में, निर्माण समय पर निर्धारित होती है। यह प्रासंगिक लाइन (मैं इसे के कई रूपों की कोशिश की है) है:

loader: 'style!css?-minimize!less?-minimize&{modifyVars:{"resources-path-prefix":"' + pathPrefix + '"}}' 

ऊपर के उदाहरण कुछ pathPrefix निर्माण समय में निर्धारित किया जा रहा है और हम कम संदर्भ में, जहां यह हो जाएगा में अपने मूल्य पास करना चाहते हैं यूआरएल() सीएसएस निर्देशों में प्रयोग किया जाता है।

उपर्युक्त काम नहीं करता है - कुछ भी कम नहीं हुआ है, और कम परिभाषित डिफ़ॉल्ट परिवर्तनीय मान लागू होता है।

क्या कोई दिखा सकता है कि कम संकलन प्रक्रिया में मूल्य को सही ढंग से कैसे पास किया जाए? धन्यवाद!

Answer 1

तो यह कठिन था, लेकिन हम अंत में यह काम किया जाता (!)। Arggh - वाक्यविन्यास की कोशिश करने और समझने के लिए इतना समय निवेश किया।

यहां कार्य है: हम पथ को निर्धारित करने के लिए समय बनाना चाहते हैं जिसका उपयोग कम फ़ाइलों में भौतिक संपत्तियों के लिए बेस यूआरएल के रूप में किया जाना चाहिए (पृष्ठभूमि छवियों, यूआरएल() कम फ़ंक्शन का उपयोग करके)।

सबसे पहले, हमने वेबपैक कॉन्फ़िगरेशन फ़ाइल में पथ निर्धारित किया है। इसका सादा जेएस, लेकिन पथ स्ट्रिंग के लिए भागने वाला पैटर्न पूरी तरह से पागल था। हमने शायद इस पर घंटे का निवेश किया। कमाल। संदेश यह है:

var assetsPath = (someCondition) ? '/assets' : "\\/127.0.0.1:8080/assets"; 

इसके बाद, कम फ़ाइलों के लिए लोडर विन्यास है assetsPath उपसर्ग ऊपर सेट का उपयोग कर:

{ 
    test: /\.less$/, 
    exclude: /node_modules/, 
    loader: 'style!css?minimize=false!less?{"modifyVars":{"assetspath":"\'' + assetsPath +'\'"}}' 
} 

सूचना जहां लोडर विन्यास में assetsPath का उपयोग करके उपरोक्त भागने पैटर्न।

अगला, आपको यह सुनिश्चित करने की आवश्यकता है कि कम फ़ाइलों में एक खाली चर परिभाषित किया जा रहा है। हम अपने 'vars.less' फ़ाइल में प्रारंभ, साथ:

@assetspath: ''; 

अंत में, किसी भी प्रासंगिक वर्ग में, हम मूल्य का उपयोग कर सकते इस तरह का निर्माण समय में पारित किया जा रहा:

background-image: url("@{assetspath}/images/facebook.png"); 

Answer 2

आप लोडर की query अनुभाग का उपयोग करने कोशिश कर सकते हैं:

loader: 'style!css?-minimize!less?-minimize', 
    query: { 
     modifyVars: { 
      "resources-path-prefix": pathPrefix 
     } 
    } 

Answer 3

यह एक है इस स्थिति के लिए अलग दृष्टिकोण, लेकिन हम सीएसएस फाइलों को लोड किए गए प्रत्येक संसाधन बेस 64 में परिवर्तित करके चीजों को काम करने में कामयाब रहे। हमें ऐसा करना था क्योंकि वेबपैक कॉन्फ़िगरेशन फ़ाइल की तुलना में संसाधनों का होस्टनाम संभवतः लाइन के नीचे संभव था।