Is there any way to use webpack-contrib/css-loader and mini-css-extract-plugin?

[Thiry1]

We have encountered some issue like #3875.
The root cause is in swc_css and may take some time to fix.
Therefore, until it is fixed, we would like to use webpack-contrib/css-loader instead.
Is there any way to use webpack-contrib/css-loader?

[hardfist]

it is supported you can just use it

[Thiry1]

@hardfist Thank you for reply.

it is supported you can just use it

I've already tried.However, the content of the css file is broken as follows.
https://github.com/Thiry1/rspack-bug-repro/blob/a6c9896cfbdeb9a7f390fff0582637bf6f083638/rspack-dist/main.css

// Imports
import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from "../node_modules/css-loader/dist/runtime/sourceMaps.js";
import ___CSS_LOADER_API_IMPORT___ from "../node_modules/css-loader/dist/runtime/api.js";
var ___CSS_LOADER_EXPORT___ = ___css_loader_api_import___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
// Module
___CSS_LOADER_EXPORT___.push([module.id, ".foo {\n  color: red;\n}", "",{"version":3,"sources":["webpack://./src/style.css"],"names":[],"mappings":"AAAA;EACE,UAAU;AACZ","sourcesContent":[".foo {\n  color: red;\n}"],"sourceRoot":""}]);
// Exports
export default ___CSS_LOADER_EXPORT___;

[hardfist]

css-loader can't be used with experiments.css:true
try the following configuration

{
  module:{
   rules: [
    {
      test: /\.css$/,
      use: ['style-loader','css-loader']
     }
   ]
  }
  experiments: {
    css:false,
  }
}

[Thiry1]

@hardfist ah, Sorry.I missed the document.

I've tried it.The following css is output, but we confirmed that there is no problem if this file is not loaded.

import API from "!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
      import domAPI from "!../node_modules/style-loader/dist/runtime/styleDomAPI.js";
      import insertFn from "!../node_modules/style-loader/dist/runtime/insertBySelector.js";
      import setAttributes from "!../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js";
      import insertStyleElement from "!../node_modules/style-loader/dist/runtime/insertStyleElement.js";
      import styleTagTransformFn from "!../node_modules/style-loader/dist/runtime/styleTagTransform.js";
      import content, * as namedExport from "!!../node_modules/css-loader/dist/cjs.js!./style.css";
      
      

var options = {}
;

options.styleTagTransform = styleTagTransformFn;
options.setAttributes = setAttributes;

      options.insert = insertFn.bind(null, "head");
    
options.domAPI = domAPI;
options.insertStyleElement = insertStyleElement;

var update = api(content, options);



export * from "!!../node_modules/css-loader/dist/cjs.js!./style.css";
       export default content && content.locals ? content.locals : undefined;


/*# sourceMappingURL=main.css.map*/

Btw, can we output css file instead of style-loader?
As you probably know, mini-css-extract-plugin causes runtime errors.

TypeError: Cannot read properties of undefined (reading 'registerLoader')
    at MiniCssExtractPlugin.apply (/Users/kei_sakamoto/workspace/rspack-bug-repro/node_modules/mini-css-extract-plugin/dist/index.js:544:34)
    at createCompiler (/Users/kei_sakamoto/workspace/rspack-bug-repro/node_modules/@rspack/core/dist/rspack.js:52:24)
    at create (/Users/kei_sakamoto/workspace/rspack-bug-repro/node_modules/@rspack/core/dist/rspack.js:83:26)
    at rspack (/Users/kei_sakamoto/workspace/rspack-bug-repro/node_modules/@rspack/core/dist/rspack.js:109:37)
    at RspackCLI.createCompiler (/Users/kei_sakamoto/workspace/rspack-bug-repro/node_modules/@rspack/cli/dist/rspack-cli.js:41:34)
    at Object.handler (/Users/kei_sakamoto/workspace/rspack-bug-repro/node_modules/@rspack/cli/dist/commands/build.js:100:30)

[hardfist]

mini-css-extract-plugin is not supported yet

[Thiry1]

We'll wait for swc_css issue to be fixed or mini-css-extract-plugin to be supported.
Thank you!