Webpack && stilo-loader in modo non corretto di risolvere i percorsi URL

Question

Diciamo che ho home.styl menu/ menu.styl image.svg

home.styl è richiesto da un punto di ingresso o di JS.

Poi:

home.styl importazioni menu/menu.styl menu/menu.styl ha url(image.svg).

Il problema è che image.svg non è stato trovato.

Esiste nella stessa cartella di menu.styl, ma non è stato risolto.

I caricatori sono: loaders: [{ test: /\.styl$/, loader: 'style!css!stylus' }, { test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/, loader: 'file?name=[path][name].[ext]' }]

Qui di seguito sono le mie idee perché questo non funziona. Spero di ottenere una risposta su come risolverlo.

===========

Se url(image.svg) è richiesto da menu.styl, va guardato nella cartella con menu.styl. Questo perché il percorso è relativo per impostazione predefinita.

Ma quello che sta succedendo è la seguente:

1. Stylus-loader elabora tutte styl, unisce le importazioni in un unico grande css
2. CSS-caricatore ottiene css con il contesto radice, vale a dire l'elenco di home.styl
3. Quindi il caricatore CSS ha risolto tutti i percorsi url(...) relativi a quel contesto superiore.

Quindi l'immagine viene cercata nella cartella di home.styl anziché menu.styl.

Come risolvere quello?

P.S. Il repo progetto di esempio è a https://github.com/iliakan/stylus-path-problem

Answer 1

Si desidera utilizzare l'opzione stylus-loader s' resolve url, che sostituirà la funzione url() all'interno dei file .styl con una risoluzione personalizzato.

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

Vedere the corresponding code. Soluzione piuttosto interessante.