4

I'm building a React app with Webpack 5 but am getting compiler errors trying to load images:

ERROR in ./src/app/component/style.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/app/component/style.scss) 8:36-87
Module not found: Error: Can't resolve './images/picture.png' in 'C:\Users\...\src\app\component\'

My project layout:

  • src/
    • app/
      • component/
        • app.scss
  • dist/
    • ui/
      • images/picture.png (Desired output)
      • index.js (Desired output)
  • static/
    • images/
      • picture.png

Webpack:

  output: {
    path: "dist/ui",
    publicPath: "/ui",
    filename: "index.js"
  },
...
      {
        test: /\.png$/,
        type: "asset/resource",
        generator: {
          filename: "images/[hash][ext][query]"
        }
      }
...
Exegesis
  • 1,028
  • 1
  • 18
  • 47
  • 1
    Webpack 5 uses the assets module. https://webpack.js.org/guides/asset-modules/ To be able to load images from css here you can find some info https://stackoverflow.com/questions/35369419/how-to-use-images-in-css-with-webpack – Antonio Pantano Oct 19 '21 at 18:42

0 Answers0