वेबपैक के साथ बंडल करते समय मैं प्रत्येक .scss फ़ाइल में variables.scss कैसे प्रदान कर सकता हूं?

Question

यह मेरी वर्तमान प्रोजेक्ट निर्देशिका संरचना है, क्योंकि मैं उपयोग के मामले के आयोजन के बेहतर तरीके के बारे में नहीं सोच सकता था कि प्रत्येक घटक की अपनी .scss फ़ाइल है, हालांकि, संपूर्ण ऐप खिलाया जाता है जिसमें वैश्विक variables.scss फ़ाइल शामिल होती है। वर्तमान में, मैं प्रत्येक घटक की .scss फ़ाइल के शीर्ष पर variables.scss फ़ाइल आयात कर रहा हूं और मुझे आश्चर्य है कि इस प्रकार के वर्कफ़्लो के लिए सर्वोत्तम प्रथाएं क्या हैं।

/ app 
/components 
    /Navigation 
     - Navigation.js 
     - Navigation.scss 
/styles 
    - globals.scss 
    - variables.scss 
    - main.scss 

मेरे main.scss फ़ाइल मूल रूप से अपनी निर्देशिका में @import सभी .scss (जैसे variables.scss, globals.scss, आदि), तथापि, मैं प्रत्येक घटक के अंदर चर का उपयोग करने की निम्नलिखित की जरूरत है:

// Navigation.scss 
@import '../../styles/variables.scss 

.class { ... } 

मुझे समझ में आता है कि मैं main.scss निर्देशिका के अंदर सभी घटक .scss फ़ाइलों को भी आयात कर सकता हूं लेकिन यह सीएसएस मॉड्यूल रखने और नाम अंतरण के लिए घटक स्तर पर उन्हें आयात करने में सक्षम होने के उद्देश्य को हरा देता है।

Answer 1

यह संभव है लेकिन मैं इसकी अनुशंसा नहीं करता हूं।

निर्भरता

हर घटक यह निर्भरता है है। आपको प्रत्येक सैस (ES6/React.js) मॉड्यूल में कई निर्भरताओं की आवश्यकता होती है। इस तरह वेबपैक निर्भरताओं को हल करता है।

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