我有一个 webpack 配置文件和一个针对这样的图像的示例测试:
module: {
rules : [
test : /\.(jp?g|png|gif)$/,
'file-loader?name=[name].[ext]&outputPath=images/'
]
}
我有一个像这样的简单文件结构:
/ src
/ img (1.jpg,2.jpg....)
/ css (a.css,b.css....)
a bunch of html files
现在,当我在我的 css 文件中引用图像时,我会写一些类似 url('../img/1.jpg) 的内容,因为我需要上一层并进入 img 文件夹,并且当我在我的 html 中包含图像时,我需要使用这样的东西:<img data-id="1" src="<%= require('./img/1.jpg') %>" />.
当我运行 webpack 时一切正常,但路径未在最终的 css 文件中正确配置!我得到这样的东西:
background: url(src/img/5.jpg);
但应该是
background: url(../src/img/5.jpg);
因为生成的 css 文件将在 css 文件夹中
换句话说,最终的 css 文件进入一个子文件夹,因此其中的图像引用都应该得到一个 '../' 但他们没有
我希望我足够清楚