CssExtractRspackPlugin#

Rspack currently does not support mini-css-extract-plugin, but it can be replaced with this plugin and used in conjunction with css-loader to extract CSS into separate files.

If your project does not depend on css-loader, it is recommended to use the built-in CSS solution experiments.css of Rspack for better performance.

• options

  • Types:

  export interface PluginOptions {
    filename?: string;
    chunkFilename?: string;
    ignoreOrder?: boolean;
    insert?: string | ((linkTag: HTMLLinkElement) => void);
    attributes?: Record<string, string>;
    linkType?: string | 'text/css' | false;
    runtime?: boolean;
    pathinfo?: boolean;
  }
  
  export interface LoaderOptions {
    publicPath?: string | ((resourcePath: string, context: string) => string);
    emit?: boolean;
    esModule?: boolean;
  }

  Plugin Configuration

  Name	Type	Default Value	Description
  filename	string	"[name].css"	The name of the CSS artifact, please refer to output.filename
  chunkFilename	string	"[name].css"	The name of the asynchronous loading CSS artifact. If not set, it will use filename; please see output.chunkFilename
  ignoreOrder	boolean	false	Whether to issue a warning if there are conflicts in the order of some CSS in different chunks. For example, entryA introduces a.css b.css, entryB introduces b.css a.css, and the order of a.css and b.css cannot be determined
  insert	string | ((linkTag: HTMLLinkElement) => void)	undefined	Decide how the link tag is inserted into the page. If passed as a string type, it will be regarded as DOM selector, and the link tag will be inserted after element corresponding to that selector. If passed as function type, the function will be converted into a String at runtime for invocation, with link tag as parameter
  attributes	Record<string, string>	undefined	Add attributes to link tags
  linkType	string | 'text/css' | false	"text/css"	Set the Type attribute value for Link Tag
  runtime	boolean	true	Injecting Runtime code related to CSS Loading
  pathinfo	boolean	false	Whether more detailed information about CSS Path should remain in product

  Loader Configuration

  Name	Type	Default Value	Description
  publicPath	string | ((resourcePath: string, context: string) => string)	output.publicPath	Public Path in CSS Module
  emit	boolean	true	Whether Extracting Out CSS Files Setting It To False Will Not Generate CSS Files
  esModule	boolean	true	Whether To Use Es Module Syntax For Exporting Class Names Of CSS Modules

Example:

const rspack = require('@rspack/core');

module.exports = {
  plugins: [new rspack.CssExtractRspackPlugin({})],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'],
      },
    ],
  },
};