Can`t resolve image.png in styles.css-CodePudding

Webpack cant build the project, because cant resolve image.

Project structure

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

Here is 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'}]
},

and main.css

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

Error message

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'

CodePudding user response：

Seems like url() should take a string as a parameter see here

So try in main.css (and make sure that the relative path to bg.png file from main.css one is correct):

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