Webpack && stylus-loader resolvem incorretamente os caminhos de URL
Digamos que eu tenhohome.styl menu/ menu.styl image.svg
home.styl
é necessário a partir de um ponto de entrada ou JS.
Então:
home.styl
importaçõesmenu/menu.styl
menu/menu.styl
temurl(image.svg)
.
O problema é queimage.svg
Não foi encontrado.
Existe na mesma pasta quemenu.styl
, mas não está resolvido.
Os carregadores são:loaders: [{ test: /\.styl$/, loader: 'style!css!stylus' }, { test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/, loader: 'file?name=[path][name].[ext]' }]
Abaixo estão minhas idéias por que isso falha. Espero obter uma resposta sobre como corrigir isso.
===========
E seurl(image.svg)
é exigido demenu.styl
, ele deve ser procurado na pasta commenu.styl
. Isso ocorre porque o caminho é relativo por padrão.
Mas o que está acontecendo é o seguinte:
O carregador de caneta processa tudostyl
, une as importações em um grandecss
O CSS-loader recebecss
com o contexto raiz, ou seja, o diretório dehome.styl
Então o CSS-loader resolveu tudourl(...)
caminhos relativos a esse contexto superior.Portanto, a imagem é pesquisada na pastahome.styl
ao invés demenu.styl
.
Como consertar isso?
P.S. O exemplo de repositório de projeto está emhttps://github.com/iliakan/stylus-path-problem