वेबपैक 2: अपनी शैलियों को खोजने के लिए प्रतिक्रिया-बूटस्ट्रैप के लिए बूटस्ट्रैप सीएसएस कैसे आयात करें?

Question

मैं अपने प्रोजेक्ट में वेबपैक 2 और प्रतिक्रिया-बूटस्ट्रैप का उपयोग कर रहा हूं; मुझे नहीं पता कि बूटस्ट्रैप सीएसएस शैलियों को सही तरीके से कैसे लागू किया जाए, ऐसा लगता है कि .css फ़ाइल लोड नहीं होती है, इससे कोई फर्क नहीं पड़ता कि import कथन मैंने उपयोग करने का प्रयास किया था।

जहाँ तक मुझे समझ में आता है मुझे जावास्क्रिप्ट आदि के साथ पूर्ण बूटस्ट्रैप पैकेज की आवश्यकता नहीं है क्योंकि मैं प्रतिक्रिया-बूटस्ट्रैप का उपयोग कर रहा हूं; मुझे बस सीएसएस की जरूरत है। के रूप में वर्णित

import 'bootstrap/dist/css/bootstrap.css'; 

यह काम करने के लिए (कोई त्रुटि संदेश), लेकिन शैली लागू नहीं कर रहे हैं लगता है ...

मैं अपने webpack कॉन्फ़िग फ़ाइल में सीएसएस लोडर कॉन्फ़िगर किया गया: तो मैं अपने main.js फ़ाइल में इस जोड़ा वेबपैक 2 दस्तावेज पर।

किसी भी मदद की सराहना की जाएगी किया :)

Answer 1

जब css-loader में modules: true की स्थापना, सीएसएस स्थानीय स्तर पर डिफ़ॉल्ट रूप से स्कोप वाला, लेकिन आप उन्हें विश्व स्तर पर उपलब्ध होना चाहिए। सबसे आसान समाधान modules: true पूरी तरह से निकालना है। आप अभी भी :local का उपयोग करके अपनी सीएसएस फ़ाइलों में मॉड्यूल का उपयोग कर सकते हैं।

लेकिन यदि आप मॉड्यूल का उपयोग करना चाहते हैं, तो ग्लोबल्स आयात करने के लिए कुछ कामकाज हैं।

परिभाषित अलग नियम

इसके बजाय सभी सीएसएस फ़ाइलों के लिए मॉड्यूल को सक्षम करने के लिए, आपको दो अलग नियम है कि वांछित फ़ाइलों से मेल कर सकते हैं। तो मान लें कि node_modules से सभी सीएसएस आयात नियमित (वैश्विक) सीएसएस के रूप में माना जाना चाहिए। नियम इस प्रकार दिखाई देगा:

{ 
    // For all .css files except from node_modules 
    test: /\.css$/, 
    exclude: /node_modules/, 
    use: [ 
    'style-loader', 
    { loader: 'css-loader', options: { modules: true } } 
    ] 
}, 
{ 
    // For all .css files in node_modules 
    test: /\.css$/, 
    include: /node_modules/, 
    use: ['style-loader', 'css-loader'] 
} 

बेशक आप क्या आप शामिल /, बहिष्कृत कर सकते हैं आप पूरी node_modules नहीं करना चाहते चाहता हूँ में और अधिक विशिष्ट हो सकता है।

निर्दिष्ट लोडर इनलाइन

आप import में लोडर निर्दिष्ट कर सकते हैं और webpack के लिए कॉन्फ़िगर लोगों पर उन का उपयोग करेगा। आप बूटस्ट्रैप आयात देंगी:

import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css'; 

यह किसी भी config बदलने के लिए बिना बस एक त्वरित समाधान नहीं है, लेकिन यह शायद वांछनीय नहीं है, खासकर जब कई ऐसे मामलों रही है।