title: Including an image in imported css file in react using webpack
body: <p>Ok, so I've been reading article after article after article and have not found a good solution to this, what should be a very simple process in developing a web app...</p>
  <p>I have my setup for webpack, babel, react and in my react app, I have a very basic css import. I've imported the image, which lives in src/static/assets/images/bg.png and I can embed it using inline css in my react component without troubles. However, I want to include my image from an included css file. The css file is parsed, but then I get the error 'Module build failed' and Can't resolve './bg.png' or a very similar path error when I mess around with the path inside the included css. I have file-loader, and url-loader installed and the file is moved into the dist/ folder route (though honestly, I would rather have an images/ folder in the dist where this goes, but that's another task.</p>
  <p>So the quest: what needs to change to have the image included from the css. I've read <a href="https://create-react-app.dev/docs/adding-images-fonts-and-files/" rel="nofollow noreferrer">https://create-react-app.dev/docs/adding-images-fonts-and-files/</a> and that alludes that my code should work, yet it doesn't.</p>
  <p>Code is below, or from my repo if you want the whole code base: <a href="https://github.com/abendago/reactimages" rel="nofollow noreferrer">https://github.com/abendago/reactimages</a></p>
  <p>REACT Code</p>
  <pre><code>import React from &quot;react&quot;;
  import './css/style.css'
  import bg from './static/assets/images/bg.png'
  function App() {
      return (
        &lt;h1 style={{backgroundImage: &quot;url(&quot; + bg + &quot;)&quot;}}&gt;In THe App Here&lt;/h1&gt;
      );
    }
  
  export default App;
  </code></pre>
  <p>src/css/style.css</p>
  <pre><code>body { background-image: url(./bg.png)}
  </code></pre>
  <p>webpack config</p>
  <pre><code>const HtmlWebPackPlugin = require(&quot;html-webpack-plugin&quot;);
  const MiniCssExtractPlugin = require(&quot;mini-css-extract-plugin&quot;);
  const path = require('path');
  
  module.exports = {
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: &quot;babel-loader&quot;
          }
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: &quot;html-loader&quot;
            }
          ]
        },
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, 'css-loader'],
        },
        {
          test: /\.(png|jpg|gif)$/i,
          use: [
            {
              loader: 'url-loader',
            },
          ],
        }
      ]
    },
    plugins: [
      new HtmlWebPackPlugin({
        template: &quot;./src/index.html&quot;,
        filename: &quot;./index.html&quot;
      }),
      new MiniCssExtractPlugin()
    ],
    devServer: {
      contentBase: path.join(__dirname, 'public')
    }
  };
  </code></pre>