我正在使用带有 scss 合成器的 postcss 来组织项目中的样式。简化结构如下：
client
media
images
image.png
styles
index.scss
components
component1.scss
Webpack 加载器的入口点是 client/styles/index.scss。
如果我用 url() 语句和 image.png 的相对路径定义一些样式 - 比如 index.scss 中的 url('../media/images/image.png') （例如 - 在 background-image 属性中），它将得到很好的解决。
但是，如果我在嵌套样式文件中做同样的事情 - styles/components/component1.scss - 由 index.scss 导入的 url('../../media/images/image.png') - Webpack 将抛出错误：
Module not found: Error: Can't resolve '../../media/images/image.png' in '/Users/anubis/Projects/Jackal/client/styles'
似乎加载器使用条目样式文件路径处理所有嵌套文件中的相对 url。如何改变这种行为？
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: true,
minimize: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
parser: scssParser,
sourceMap: true,
plugins: () => [
require('precss')({
import: {
resolve: styleFileResolver
}
}),
require('postcss-font-magician')({
hosted: ['./client/media/fonts/OpenSans']
}),
require('postcss-short')(),
require('postcss-cssnext')(),
require('postcss-utilities')()
]
}
}
]
}