`new URL('./style.scss', import.meta.url)` generates style.css and style.scss, empty

[fregante]

Bug Description

I can't use the alternative to resourceQueries described by https://webpack.js.org/guides/asset-modules/#url-assets

The problem might be wanting to have 3 things at once:

• raw imports like import "./style.css" -> extracted by mini-css-extract-plugin
• CSS modules -> also extracted
• asset imports like new URL("./style.css", import.meta.url) parsed as CSS before being extracted

Link to Minimal Reproduction and step to reproduce

Full repro: https://github.com/fregante/webpack-sandbox/tree/main/new-url-scss

const newUrl = new URL("bootstrap/scss/bootstrap.scss", import.meta.url);

console.log("?url", URL);

import MiniCssExtractPlugin from "mini-css-extract-plugin";

const config = {
  mode: "development",
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

export default config;

Expected Behavior

The file should be handled by the S/CSS loaders and appear in dist

Actual Behavior

The file contains:

// extracted by mini-css-extract-plugin
export {};

And actually I see it duplicated, as .css and .scss

Environment

System:
    OS: macOS 15.6.1
  Binaries:
    Node: 22.18.0 - /usr/local/bin/node
    npm: 10.9.3 - ~/.bun/bin/npm
  Browsers:
    Chrome: 141.0.7390.108
    Safari: 18.6
  Packages:
    css-loader: ^7.1.2 => 7.1.2 
    sass-loader: ^16.0.5 => 16.0.5 
    style-loader: ^4.0.0 => 4.0.0 
    webpack: ^5.102.1 => 5.102.1 
    webpack-cli: ^6.0.1 => 6.0.1

Is this a regression?

No

Last Working Version

No response

Additional Context

No response

[alexander-akait]

Not related to webpack, the bug in mini-css-extract-plugin

We have the same task for webpack/webpack#14893:

new URL("./style.css", import.meta.url): Gives an URL to a stylesheet including all styles. @import and url() are resolved.

[alexander-akait]

Currently - hard to solve, because we extract CSS from JS and then generate code again in this plugin, it will be easy to solve inside built-in CSS support in webpack

[alexander-akait]

Hope we will finish built-in CSS support soon (next month, we are already working on it)

[fregante]

I also tried to enable css-style-sheet but I was unable to pair it with the rest of my config, is it the same issue with mini-css-extract-plugin here?

I really just need a way to load stylesheets on demand (and await them with my code, if necessary)

[alexander-akait]

@fregante Yeah, currently only array supported by mini-css-extract-plugin, style-loader supports both (but yeah, no extracting), workaround you can disable - runtime - https://github.com/webpack/mini-css-extract-plugin?tab=readme-ov-file#runtime (using them as entry points for example) and load them dynamically using any construction (new URL, dynamic import, injecting into DOM directly)

[fregante]

I think that would affect the entire application, so disabling the runtime would not be possible (it also breaks import("./file.js") if it leads to ./file.css also bring created)

I guess I'll have to go back to ?url as I was trying to in webpack/webpack#17181.

Thanks for your quick responses! 🙏

[alexander-akait]

@fregante Can you create a small repo with you trying to achieve (with code) and I will look how it can be solved. Do you need to handle CSS, i.e. url()/@import/etc? If yes using ?url is not help too

[fregante]

The one I posted above pretty much covers it, once you remove new URL()

?url has worked fine for a long while, SCSS is processed, generated, and outputted as .css, with the config being this:

      {
        // Only CSS. This rule is only needed to generate new CSS bundles on the fly.
        // `?url` is the default for assets (see other "asset/resource" rules above)
        test: /\.s?css$/,
        resourceQuery: /url/,
        type: "asset/resource",
        generator: {
          // Must include ".css" or else it may output .scss files
          filename: "css/[name]-[contenthash].css",
        },
      },
      {
        test: /\.s?css$/,
        resourceQuery: { not: [/url|raw/] },
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.s?css$/,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            plugins: [
              // Convert REM to PX https://github.com/pixiebrix/pixiebrix-source/issues/3469
              unitProcessor({
                exclude: "",
                unitList: ["rem"],
                processor: (value) => ({
                  value: value * DEFAULT_ROOT_PX,
                  unit: "px",
                }),
              }),
            ],
          },
        },
      },
      {
        test: /\.scss$/,
        loader: "sass-loader",
        options: {
          sassOptions: {
            quietDeps: true,
            silenceDeprecations: [
              "import",
              "color-functions",
              "global-builtin",
              "mixed-decls",
            ],
          },
        },
      },
    ],
  },

[fregante]

My solution at the moment is to remove the exports field from the specific package in my monorepo, this lets me go back to the ?url imports

[alexander-akait]

@fregante As I understand correctly do you want to get some CSS files by URLs (including extracting and resolving all url/@import/etc), right?

[fregante]

I presume, yes. I think that the way it has been working is exactly the same as a raw import "./style.scss" (so parse SCSS, bundle all imports, create dist/style.css) except it's a standalone bundle and I just get a direct URL to it.

[alexander-akait]

@fregante thanks for feedback prioritize for built-in CSS

[fregante]

No pressure. I think it will be a very long while before I'll be able to switch away from mini-css-extract-plugin, particularly due to this setup: #1092

[alexander-akait]

@fregante #1092

Can you provide more context? I still can't understand what module should return? Do we need to return https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet? If yes, it is planned and not hard to implement