English

tools.cssExtract

Type:

import type {
  CssExtractRspackPluginOptions,
  CssExtractRspackLoaderOptions,
} from '@rspack/core';

type CSSExtractOptions = {
  pluginOptions?: CssExtractRspackPluginOptions;
  loaderOptions?: CssExtractRspackLoaderOptions;
};

Default:

const defaultOptions = {
  pluginOptions: {
    ignoreOrder: true,
    // The default value is determined by the output.distPath and output.filename options of Rsbuild
    filename: 'static/css/[name].css',
    chunkFilename: 'static/css/async/[name].css',
  },
  loaderOptions: {},
};

Version: >= 0.7.0

Rsbuild uses the CssExtractRspackPlugin plugin by default to extract CSS into separate files.

The options for CssExtractRspackPlugin can be changed through tools.cssExtract.

pluginOptions

Type: CssExtractRspackPluginOptions
Example:

rsbuild.config.ts

export default {
  tools: {
    cssExtract: {
      pluginOptions: {
        ignoreOrder: false,
      },
    },
  },
};

loaderOptions

Type: CssExtractRspackLoaderOptions
Example:

rsbuild.config.ts

export default {
  tools: {
    cssExtract: {
      loaderOptions: {
        esModule: false,
      },
    },
  },
};

Please refer to the CssExtractRspackPlugin plugin documentation to learn about all available options.