Webpack && लेखनी-लोडर गलत तरीके से हल यूआरएल रास्तों

Question

मान लीजिए कि मैं home.styl menu/ menu.styl image.svg

home.styl एक प्रवेश बिंदु या जे एस की आवश्यकता नहीं है करते हैं।

फिर

:

home.styl आयात menu/menu.styl menu/menu.stylurl(image.svg) है।

समस्या यह है कि image.svg नहीं मिला है।

यह menu.styl के समान फ़ोल्डर में मौजूद है, लेकिन हल नहीं किया गया है।

लोडर हैं: loaders: [{ test: /\.styl$/, loader: 'style!css!stylus' }, { test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/, loader: 'file?name=[path][name].[ext]' }]

नीचे मेरे विचारों क्यों यह काम नहीं करता है। एक उत्तर पाने के लिए आशा है कि इसे कैसे ठीक किया जाए।

=========== url(image.svg)menu.styl की आवश्यकता नहीं है

है, यह menu.styl के साथ फ़ोल्डर में देखा जाना चाहिए। ऐसा इसलिए है क्योंकि पथ डिफ़ॉल्ट रूप से सापेक्ष है।

लेकिन क्या हो रहा है निम्नलिखित है:

1. स्टाइलस-लोडर सभी styl प्रोसेस करता है, एक बड़ा css
2. सीएसएस-लोडर जड़ संदर्भ, अर्थात् home.styl
की सूची के साथ css हो जाता है में आयात मिलती है
3. फिर सीएसएस-लोडर ने उस ऊपरी संदर्भ के सापेक्ष सभी url(...) पथों को हल किया।

तो छवि home.styl बजाय menu.styl के फ़ोल्डर में खोजा गया है।

इसे कैसे ठीक करें?

पीएस उदाहरण परियोजना रेपो https://github.com/iliakan/stylus-path-problem

Answer 1

आप का उपयोग करने के stylus-loader के resolve url विकल्प है, जो एक कस्टम रिसोल्वर के साथ अपने .styl फ़ाइलों के अंदर url() समारोह का स्थान ले लेगा चाहते है।

{ 
    test: /\.styl$/, 
    loader: 'style!css!stylus?resolve url' 
} 

the corresponding code देखें। बहुत अच्छा समाधान।