无法解析 style.css 中的 image.png

Question

Webpack 无法构建项目，因为无法解析图像。

项目结构

project/
├─ node_modules/
├─ src/
│  ├─ assets/
│  │  ├─ images/
│  │  ├─ styles/
├─ package.json
├─ webpack.config.js

这里是 webpack.config.js

{
  test: /\.(JPG|gif|svg|gif|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  type: 'asset/resource',
  generator: {
    filename: 'assets/images/[name].[contenthash:7][ext]'
  },
  use: [{loader: 'url-loader'}]
},

和 main.css

.b-promo {
  background: url(../assets/images/bg.png) top no-repeat;
  background-size: cover
}

错误信息

ERROR in ./assets/css/main.css
Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../assets/images/bg.png' in '/home/path/to/project/src/assets/css'

Answer 1

似乎 url() 应该将字符串作为参数see here

所以在 main.css 中尝试（并确保从 main.css 到 bg.png 文件的相对路径是正确的）：

.b-promo {
  background: url("../assets/images/bg.png") top no-repeat;
  background-size: cover;
}