Guide
Config
Plugin
API
Community
Guide
Config
Plugin
API
Community

tools.cssLoader

  • Type: Object | Function
const defaultOptions = {
  modules: rsbuildConfig.output.cssModules,
  sourceMap: rsbuildConfig.output.sourceMap.css,
  // value is `1` when compiling css files, and is `2` when compiling sass/less files
  importLoaders: 1 || 2,
};

Rsbuild uses css-loader by default to handle CSS resources. You can modify the options of css-loader through tools.cssLoader.

TIP

If you need to modify the options related to CSS Modules, it is recommended to use the output.cssModules config first.

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;
    },
  },
};