वेबपैक [url/file-loader] यूआरएल

Question

के सापेक्ष पथ को हल नहीं कर रहा है मुझे संबंधित पथ के बारे में वेबपैक में समस्या का सामना करना पड़ रहा है।

मैं कार्यस्थान निर्देशिका में 2 अलग परियोजना है: स्थिर & कार्य

परियोजना-बी:

1. परियोजना-ए [Gulp का उपयोग कर Bundling] मुझे परिदृश्य को समझाने की कोशिश करते हैं नई परियोजना

के रूप में: [Webpack का उपयोग कर Bundling] दोनों परियोजनाओं में एक ही स्टाइलिंग उपयोग कर रहे हैं, इसलिए मैं एससीएसएस फ़ाइलें पुन: उपयोग करने परियोजना बी में प्रोजेक्ट ए के [मानक चर, पूर्वनिर्धारित लेआउट, क्रियार्थ द्योतक, वर्ग आदि से मिलकर] चाहता था।

अब, अगर मैं परियोजना-ए [बाहर टिप्पणी करते पृष्ठभूमि छवि यूआरएल Depency] के रूप में एक और आंशिक परियोजना बी index.scss में index.scss आयात करने के लिए कोशिश कर रहा हूँ, webpack उत्पन्न करने में सक्षम है आवश्यक सीएसएस आउटपुट फ़ाइल।

// Import Project A SCSS [Common Varibles, Classes, Styling etc] 
@import "../../../../Project_A/assets/stylesheets/index"; 

लेकिन जैसे परियोजना-ए के index.scss आगे संबंधित सापेक्ष-पथ से पृष्ठभूमि छवियों बात कर रहा है, webpack निर्माण त्रुटि

'File/dir not found in XYZ/Project-B/Source/Stylesheets'.

सटीक त्रुटि ब्लॉक फेंक जाता है:

ERROR in ./src/assets/stylesheets/index.scss Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'diWorkSpace\Project_B\src\assets\stylesheets

स्क्रीनशॉट:

मैं नहीं हूं समझने में सक्षम, क्यों वेबपैक परियोजना-ए के अंदर संपत्ति के सापेक्ष पथ को हल करने में सक्षम नहीं है और अभी भी 'प्रोजेक्ट बी' के अंदर देख रहा है। https://github.com/raviroshan/webpack-build-issue/tree/master/WorkSpace

कदम पुन: पेश करने:

यहाँ नकली जारी करने के लिए कोड-रेपो यूआरएल है।

1. रेपो डाउनलोड करें।
2. Project_B फ़ोल्डर के अंदर ब्राउज़ करें, और एक एनपीएम इंस्टॉल करें।
3. रन 'वेबपैक'। यह सापेक्ष छवि यूआरएल कोड के रूप में सही ढंग से निर्माण करेगा। https://github.com/raviroshan/webpack-build-issue/blob/master/WorkSpace/Project_A/assets/stylesheets/index.scss#L27

Answer 1

तो, अंत में इतना संघर्ष के बाद, एक उचित समाधान मिला है।

यह सीएसएस-लोडर के साथ एक मुद्दा साबित हुआ है, यह वर्तमान फ़ाइल के संबंध में यूआरएल को हल करने में सक्षम नहीं है।

संकल्प-यूआरएल-लोडर इस समस्या का समाधान का उपयोग करना। https://github.com/raviroshan/webpack-build-issue

नोट: https://www.npmjs.com/package/resolve-url-loader

// Old Loader Config in Webpack-entry 
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!sass-loader?sourceMap') 

// New [Fixed] Loader Config in Webpack-entry 
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!resolve-url-loader!sass-loader?sourceMap') 

यहाँ समाधान के साथ अद्यतन किया जाता है कोड-रेपो -loader आपका Webpack.config.js छोड़ मत करो हमेशा लोडर की लंबे समय से फार्म का उपयोग करना चाहिए नाम (यानी -लोडर प्रत्यय)।

संकल्प-यूआरएल नामक एक और पैकेज है जिसे वेबपैक हल-यूआरएल-लोडर के साथ भ्रमित कर सकता है।

Answer 2

आप publicPath एक रिश्तेदार पथ फ़ाइल-लोडर में रिश्तेदार पथ प्राप्त करने के लिए के रूप में स्थापित करने की आवश्यकता:

अब वापस कोड की टिप्पणी की लाइन डाल दिया।

Answer 3

ऐसा लगता है यह सीएसएस-लोडर गलती है और जिस तरह से यह @import और url() में रास्तों का समाधान करता है।यह सभी पथों को हल करने का प्रयास करता है - यहां तक ​​कि आयातित स्टाइलशीट से भी - मुख्य सीएसएस फ़ाइल के सापेक्ष - जो आपके मामले में /Project_B/src/assets/stylesheets/index.scss है।

रोओ मत! एक समाधान है!

शायद यह सही नहीं है, लेकिन यह अब तक का सबसे अच्छा है।

एक वैश्विक चर $assetsPath संपत्ति वर्तमान स्टाइलशीट के सापेक्ष करने के लिए एक रास्ता पकड़े बनाएँ। फिर इस चर को अपने सभी url() मानों पर प्रीपेड करें।

में अपने /Project_A/assets/stylesheets/index.scss आप लिखते हैं:

/*/ Using !default we can override this variable even before the following line: /*/ 
$assetsPath: '../' !default; 

.container { 
    /*/ ... /*/ 
    .content-wrapper { 
     /*/ ... /*/ 
     background-image: url($assetsPath + "images/content-bg.jpg"); 
    } 
} 

अपने /Project_B/src/assets/stylesheets/index.scss आप लिखते हैं में:

/*/ The following variable will override $assetsPath defined in the imported file: /*/ 
$assetsPath: '../../../../Project_A/assets/'; 

/*/ Import Project A SCSS [Common Varibles, Classes, Styling etc] /*/ 
@import "../../../../Project_A/assets/stylesheets/index"; 

बाद

आप Gulp साथ परियोजना एक बंडल यदि यह वाला है प्रोजेक्ट-ए कोड को देखें:

 /*/ ... /*/ 
     background-image: url("../images/content-bg.jpg"); 

हालांकि, जब आप बंडल Webpack साथ परियोजना-बी इसे देख वाला है परियोजना-ए के कोड के रूप में:

 /*/ ... /*/ 
     background-image: url("../../../../Project_A/assets/images/content-bg.jpg"); 

इसलिए, आप सहेजे जाते हैं।

सबसे निश्चित रूप से मैं इस मुद्दे पर करीब देखूंगा। url-loader@import कथन में पथ का सम्मान करेगा और इसके अनुसार संदर्भित संपत्तियों पर लागू होगा यदि इससे सभी को टाला जा सकता है। या तो मुझे कुछ याद आ रही है या इसे एक बग के रूप में माना जाना चाहिए।

मुझे आशा है कि आपके पास एक शानदार दिन होगा!
~ विक्टर