Webpack && stylus-loader resuelve incorrectamente las rutas de URL
Digamos que tengohome.styl menu/ menu.styl image.svg
home.styl
se requiere desde un punto de entrada o JS.
Entonces:
home.styl
importacionesmenu/menu.styl
menu/menu.styl
tieneurl(image.svg)
.
El problema es eseimage.svg
no se encuentra.
Existe en la misma carpeta quemenu.styl
, pero no está resuelto.
Los cargadores son:loaders: [{ test: /\.styl$/, loader: 'style!css!stylus' }, { test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/, loader: 'file?name=[path][name].[ext]' }]
A continuación están mis ideas de por qué eso falla. Espero obtener una respuesta sobre cómo solucionarlo.
===========
Siurl(image.svg)
se requiere demenu.styl
, debe buscarse en la carpeta conmenu.styl
. Eso es porque la ruta es relativa por defecto.
Pero lo que está sucediendo es lo siguiente:
Stylus-loader procesa todostyl
, une las importaciones en una grancss
CSS-loader obtienecss
con el contexto raíz, es decir, el directorio dehome.styl
Entonces CSS-loader resolvió todourl(...)
caminos relativos a ese contexto superior.Entonces la imagen se busca en la carpeta dehome.styl
en lugar demenu.styl
.
¿Cómo arreglar eso?
PD El repositorio de proyecto de ejemplo está enhttps://github.com/iliakan/stylus-path-problem