Webpack && Stylus-Loader URL-Pfade falsch auflösen
Sagen wir, ich habehome.styl menu/ menu.styl image.svg
home.styl
wird von einem Einstiegspunkt oder JS benötigt.
Dann
home.styl
Importemenu/menu.styl
menu/menu.styl
haturl(image.svg)
.
Das Problem ist, dassimage.svg
wurde nicht gefunden
s befindet sich im selben Ordner wiemenu.styl
, wird aber nicht aufgelöst.
Die Lader sind:loaders: [{ test: /\.styl$/, loader: 'style!css!stylus' }, { test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/, loader: 'file?name=[path][name].[ext]' }]
Below sind meine Ideen, warum das fehlschlägt. Ich hoffe, eine Antwort auf diese Frage zu bekommen.
===========
Wennurl(image.svg)
wird benötigt vonmenu.styl
, es sollte in dem Ordner mit @ nachgeschlagen werdmenu.styl
. Das liegt daran, dass der Pfad standardmäßig relativ ist.
Aber was ist los ist das folgende:
Stylus-Loader verarbeitet allestyl
, verbindet Importe zu einem großencss
CSS-Loader bekommtcss
mit dem Wurzelkontext, nämlich dem Verzeichnis vonhome.styl
Dann hat der CSS-Loader alleurl(...)
Pfade relativ zu diesem oberen Kontext.So wird das Bild im Ordner von @ gesuchome.styl
Anstatt vonmenu.styl
.
Wie kann man das beheben?
P.S. Das Beispielprojekt repo ist beihttps: //github.com/iliakan/stylus-path-proble