Webpack 使用postcss解析嵌套样式文件中的相对URL&；scss

我正在使用postcss和SCSSSynthax来组织项目中的样式。简化结构如下所示：

client
  media
    images
      image.png
  styles
    index.scss
    components
      component1.scss

网页包加载程序的入口点是client/styles/index.scss

如果我在index.scss中使用url（）语句定义某种样式，并使用与image.png类似的url（“../media/images/image.png”）（例如，在background image属性中）的相对路径，则可以很好地解决此问题

但是，如果我在index.scss-Webpack导入的嵌套样式文件-style/components/component1.scss-url（'../../media/images/image.png'）中执行相同操作，将抛出一个错误：

Module not found: Error: Can't resolve '../../media/images/image.png' in '/Users/anubis/Projects/Jackal/client/styles'

似乎加载程序使用条目样式的文件路径处理所有嵌套文件中的相对URL。如何改变这种行为

{
测试：/\.scss$/,，
使用：[
{loader:'style loader'}，
{
加载器：“css加载器”，
选项：{
进口装载机：1，
sourceMap:true，
最小化：真
}
},
{
加载器：“postss加载器”，
选项：{
标识：'邮政编码'，
解析器：scssParser，
sourceMap:true，
插件：（）=>[
require（'precss'）({
进口：{
resolve:styleFileResolver
}
}),
要求（'postss-font-maxican'）({
托管：['./客户端/媒体/字体/OpenSAN']
}),
要求（'postss-short'）（），
要求（'postss-cssnext'）（），
要求（'PostSS-utilities'）（）
]
}
}
]
}

您缺少一个

解析url加载程序

。你可以尝试在css和postcss加载程序之间添加它

是的，这对我很有帮助。我还切换到了sass加载程序，并仅为autoprefix、css mqpacker和cssnano保留POSTSS。工作管道现在是

style loader