问题描述
假设我有家庭风格菜单/菜单样式图像.svg
home.styl
是入口点或 JS 所必需的.
home.styl
is required from an entry point or JS.
那么:
home.styl
导入 menu/menu.styl
menu/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.
但是发生的事情如下:
- Stylus-loader 处理所有
styl
,将导入合并成一个大css
- CSS-loader 通过根上下文获取
css
,即home.styl
的目录 - 然后 CSS-loader 解析所有
url(...)
相对于上层上下文的路径.
- Stylus-loader processes all
styl
, joins imports into one bigcss
- CSS-loader gets
css
with the root context, namely the directory ofhome.styl
- 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 &&stylus-loader 错误地解析 url 路径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!