This div is used to preload the font
Guide
Config
Plugin
API
Community
Guide
Config
Plugin
API
Community

cssLoader

  • Type: Object | Function
  • Default: undefined

The config of css-loader can be modified through tools.cssLoader. The default config is as follows:

{
  modules: {
    auto: true,
    exportLocalsConvention: 'camelCase',
    localIdentName: rsbuildConfig.output.cssModules.localIdentName,
    // isServer indicates node (SSR) build
    // isWebWorker indicates web worker build
    exportOnlyLocals: isServer || isWebWorker,
  },
  sourceMap: rsbuildConfig.output.sourceMap.css,
  // importLoaders is `1` when compiling css files, and is `2` when compiling sass/less files
  importLoaders: 1 || 2,
}
TIP

When using Rspack as the bundler, this configuration is only supported when set injectStyles is true.

To modify CSS Modules configuration, it is recommended to use the output.cssModules configuration.

Object Type

When this value is an Object, it is merged with the default config via deep merge. For example:

export default {
  tools: {
    cssLoader: {
      modules: {
        exportOnlyLocals: true,
      },
    },
  },
};

Function Type

When the value is a Function, the default config is passed in as the first parameter. You can modify the config object directly, or return an object as the final config. For example:

export default {
  tools: {
    cssLoader: (config) => {
      config.modules.exportOnlyLocals = true;
      return config;
    },
  },
};