title: Webpack 5 not bundling CSS url() asset modules
body: <p>I'm trying to include a new font face in my React application. This is built using Webpack.</p>
  <p>I've followed the webpack documentation of font bundling, <a href="https://webpack.js.org/guides/asset-management/#loading-fonts" rel="nofollow noreferrer">https://webpack.js.org/guides/asset-management/#loading-fonts</a>. For some reason this isn't finding the font files I've included.</p>
  <p>I have specified the font files source when making a new font face:</p>
  <pre><code>@font-face {
    font-family: &quot;Lato Regular&quot;;
  
    src: url(&quot;../../assets/fonts/Lato-Regular.woff2&quot;) format(&quot;woff2&quot;);
  
    font-style: normal;
  }
  </code></pre>
  <p>And then I have included this new font face in my styles like so</p>
  <pre><code>.button {
     font-family: &quot;Lato Regular&quot;;
  }
  </code></pre>
  <p>However, the webpack compiler produces errors when trying to compile this:</p>
  <pre><code>ERROR in ./src/styles/index.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/styles/index.scss) 21:37-102
  Module not found: Error: Can't resolve '../../assets/fonts/Lato-Regular.woff2' in 'G:\src\com\Web\app\src\styles'
  resolve '../../assets/fonts/Lato-Regular.woff2' in 'G:\src\com\Web\app\src\styles'
    using description file: G:\src\com\Web\app\package.json (relative path: ./src/styles)
      using description file: G:\src\com\Web\app\package.json (relative path: ./assets/fonts/Lato-Regular.woff2)
        no extension
          G:\src\com\Web\app\assets\fonts\Lato-Regular.woff2 doesn't exist
        .ts
          G:\src\com\Web\app\assets\fonts\Lato-Regular.woff2.ts doesn't exist
        .tsx
          G:\src\com\Web\app\assets\fonts\Lato-Regular.woff2.tsx doesn't exist
        .js
          G:\src\com\Web\app\assets\fonts\Lato-Regular.woff2.js doesn't exist
        as directory
          G:\src\com\Web\app\assets\fonts\Lato-Regular.woff2 doesn't exist
   @ ./src/styles/index.scss 8:6-174 22:17-24 26:0-144 26:0-144 27:22-29 27:33-47 27:50-64
   @ ./src/index.tsx 4:0-29
  
  </code></pre>
  <p>These fonts do exist in the directory.</p>
  <p>Heres the rules in my webpack.config.js.</p>
  <pre><code>    output: {
        path: path.resolve(__dirname, &quot;wwwroot&quot;),
        filename: &quot;js/[name].bundle.js&quot;,
        publicPath: &quot;&quot;,
        assetModuleFilename: &quot;static/[name][ext]&quot;,
      },
      entry: &quot;./src/index.tsx&quot;,
      module: {
        rules: [
          {
            test: /\.s[ac]ss$/i,
            use: [
              // Creates `style` nodes from JS strings
              { loader: &quot;style-loader&quot; },
              // Translates CSS into CommonJS
              {
                loader: &quot;css-loader&quot;,
                options: {
                  url: true,
                },
              },
              // Compiles Sass to CSS
              { loader: &quot;sass-loader&quot; },
            ],
          },
          {
            test: /\.(png|svg|jpg|jpeg|gif)$/i,
            type: &quot;asset&quot;,
          },
          {
            test: /\.(woff|woff2|eot|ttf)$/,
            type: &quot;asset/resource&quot;,
          },
          {
            test: /\.(ts|js)x?$/i,
            exclude: /node_modules/,
            use: {
              loader: &quot;babel-loader&quot;,
              options: {
                presets: [
                  &quot;@babel/preset-env&quot;,
                  &quot;@babel/preset-react&quot;,
                  &quot;@babel/preset-typescript&quot;,
                ],
              },
            },
          },
        ],
      },
  </code></pre>
  <p>When importing images in .tsx files, the images do get bundles approriatley. This only occurs when using the CSS/SCSS url().</p>