new URL(“./path/to/file.css”, import.meta.url) is incorrect

[sgarfinkel]

Bug report

The mini-css-extract-plugin prevents webpack from resolving URLs to the emitted CSS asset. Instead, this is resolved to the JS chunk, which contains no data. The expected result is that this instead resolves appropriately to the actual CSS asset.

Actual Behavior

See above. The URL will resolve to the JS chunk instead of the CSS asset.

Expected Behavior

The URL should resolve to the emitted CSS asset.

How Do We Reproduce?

Very easy to reproduce, simply bundle a URL that points to a CSS file.

Please paste the results of npx webpack-cli info here, and mention other relevant information

[alexander-akait]

If you want to use new URL("./pat/to/file.css", import.meta.url) you need to do extra setup right now (we will support it by default inside webpack soon), right now you need to use:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(css)$/i,
        dependency: { not: ['url'] },
        use: [
          // Your loaders for `import style from "./style.css"`
        ],
      },
      {
        test: /\.(css)$/i,
        dependency: ['url'],
        type: "javascript/auto",
        use: [
          // Your loaders for `new URL("./css/style.css", import.meta.url)
        ],
      },
    ],
  }
}

Feel free to feedback, we will improve docs soon too and I will add a test case to provide example