Webpack &&stylus-loader 错误地解析 url 路径 [英] Webpack && stylus-loader incorrectly resolve url paths

问题描述

假设我有<代码>家庭风格菜单/菜单样式图像.svg

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

home.styl is required from an entry point or JS.

那么:

home.styl 导入 menu/menu.stylmenu/menu.styl 有 url(image.svg).

问题是没有找到image.svg.

它与 menu.styl 存在于同一文件夹中，但未解析.

It exists in the same folder as menu.styl, but is not resolved.

加载器是:<代码>装载机:[{测试:/\.styl$/,loader: 'style!css!stylus'}, {测试:/\.(png|jpg|svg|ttf|eot|woff|woff2)$/,loader: 'file?name=[path][name].[ext]'}]

以下是我的想法失败的原因.希望得到如何解决这个问题的答案.

Below are my ideas why that fails. Hope to get an answer how to fix that.

============

===========

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

If url(image.svg) is required from menu.styl, it should be looked up in the folder with menu.styl. That's because the path is relative by default.

但是发生的事情如下:

1. Stylus-loader 处理所有styl，将导入合并成一个大css
2. CSS-loader 通过根上下文获取css，即home.styl
的目录
3. 然后 CSS-loader 解析所有 url(...) 相对于上层上下文的路径.

1. Stylus-loader processes all styl, joins imports into one big css
2. CSS-loader gets css with the root context, namely the directory of home.styl
3. Then CSS-loader resolved all url(...) paths relative to that upper context.

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

So the image is searched in the folder of home.styl instead of menu.styl.

如何解决?

附言示例项目存储库位于 https://github.com/iliakan/stylus-path-problem

P.S. The example project repo is at https://github.com/iliakan/stylus-path-problem

推荐答案

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

You want to use stylus-loader's resolve url option, which will replace the url() function inside your .styl files with a custom resolver.

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

请参阅相应代码.非常酷的解决方案.

See the corresponding code. Pretty cool solution.

这篇关于Webpack &amp;&amp;stylus-loader 错误地解析 url 路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！