#tools.lightningcssLoader

• Type: Rspack.LightningcssLoaderOptions | Function | boolean
• Default:

const defaultOptions = {
  errorRecovery: true,
  // use current project's browserslist config
  targets: browserslist,
};

You can set the options for builtin:lightningcss-loader through tools.lightningcssLoader.

#Object type

When tools.lightningcssLoader is an object, it will be merged with the default configuration using Object.assign.

For example, you can disable the addition of vendor prefixes through tools.lightningcssLoader.exclude. In this case, you can use PostCSS's autoprefixer plugin to add vendor prefixes.

export default {
  tools: {
    lightningcssLoader: {
      exclude: {
        vendorPrefixes: true,
      },
    },
  },
};

#Function type

When tools.lightningcssLoader is a function, the default options will be passed in as the first parameter. You can directly modify this object or return a new object as the final options to be used. For example:

export default {
  tools: {
    lightningcssLoader: (config) => {
      config.exclude = {
        vendorPrefixes: true,
      };
      return config;
    },
  },
};

#CSS minification

When CSS minification is enabled, Rsbuild minifies styles as follows:

• Styles imported with ?inline or ?url, or injected through output.injectStyles, are minified by lightningcss-loader.
• Other styles are extracted into separate CSS files and processed by the CSS minimizer.

#Disable loader

Set tools.lightningcssLoader to false to disable the built-in lightningcss-loader in Rsbuild:

export default {
  tools: {
    lightningcssLoader: false,
  },
};