Webpack && stylus-loader 错误地解析 url 路径

Question

假设我有 home.styl menu/ menu.styl image.svg

home.styl 是入口点或 JS 所必需的。

然后：

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]' }]

以下是我对失败原因的看法。希望得到解决方法的答案。

===========

如果 menu.styl 需要 url(image.svg)，则应在 menu.styl 的文件夹中查找。那是因为路径默认是相对的。

但实际情况如下：

Stylus-loader 处理所有 styl，将导入合并为一个大 css
CSS-loader 得到css 的root 上下文，即home.styl
然后 CSS-loader 解析了所有 url(...) 相对于上层上下文的路径。

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

如何解决？

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

Answer 1

您想使用 stylus-loader 的 resolve url 选项，它将用自定义解析器替换 .styl 文件中的 url() 函数。

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

参见the corresponding code。非常酷的解决方案。

Webpack && stylus-loader 错误地解析 url 路径

Webpack && stylus-loader incorrectly resolve url paths

stylus

webpack