Resolve-url-loader 无法解析我的 css 文件中的 images/fonts。 我的文件夹结构如下:
src
public
images
-banner-bg.jpg
stylesheets
css
-basic.css with background: url(../../images/banner-bg.jpg)
scss
-main.scss with @import "../css/basic.css";
输出文件夹:
dist
public
images
-banner-bg.jpg
stylesheets
-main-output.css
图像和字体在开发服务器中显示正常,并在生产中正确复制。 main-output.css - 检查时 - 显示
background:url(public/images/banner-bg.jpg
而不是预期的
background:url(../images/banner-bg.jpg)
浏览器控制台显示错误:
获取文件:///home/ustrd/Documents/myproject12/dist/public/stylesheets/public/images/banner-bg.jpg net::ERR_FILE_NOT_FOUND
plugins: [
new MiniCssExtractPlugin({
filename: path.join("public", "stylesheets", "[name].css")
})
],
module: {
rules: [
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
sourceMap: true,
importLoaders: 2
}
},
{
loader: "postcss-loader",
options: {
ident: "postcss",
plugins: () => [new PostcssPresetEnv()]
}
},
{
loader: "resolve-url-loader",
options: { sourceMap: true }
},
{ loader: "sass-loader", options: { sourceMap: true } }
]
},
有什么想法可以解决这个问题吗?
我猜
resolve-url-loader
不知道你最后一个main-output.css
的位置,并期望它在dist
的屋顶。
您可以尝试使用自定义 join
函数来修复路径:
{
loader: "resolve-url-loader",
options: {
sourceMap: true,
join: (uri, base) => path.join('../..', base, uri);
}
},
这应该输出类似这样的内容:
background:url(../../public/images/banner-bg.jpg)
尚未测试过。请查看工作原理了解一些详细信息。另请查看 css-loader url 设置。
更改
main-output.css
的位置可能会更容易:
new MiniCssExtractPlugin({
filename: "[name].css"
})