Webpack＆amp;＆amp; stylus-loader错误地解析了url路径

Question

让我说我有 home.styl menu/ menu.styl image.svg

输入点或JS需要

home.styl。

然后：

home.styl导入menu/menu.styl menu/menu.styl有url(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. Stylus-loader处理所有styl，将导入加入一个大css
2. CSS-loader使用根上下文获取css，即home.styl目录
3. 然后CSS-loader解决了相对于上层上下文的所有url(...)路径。

因此，在home.styl而不是menu.styl的文件夹中搜索图像。

如何解决这个问题？

P.S。示例项目仓库位于https://github.com/iliakan/stylus-path-problem

Answer 1

您希望使用stylus-loader的{​​{1}}选项，该选项将使用自定义解析程序替换resolve url文件中的url()函数。

.styl

见the corresponding code。很酷的解决方案。