#tools.lightningcssLoader

• 类型： Rspack.LightningcssLoaderOptions | Function | boolean
• 默认值：

const defaultOptions = {
  errorRecovery: true,
  // 使用当前项目的 browserslist 配置
  targets: browserslist,
};

通过 tools.lightningcssLoader 可以设置 builtin:lightningcss-loader 的选项。

#Object 类型

当 tools.lightningcssLoader 是一个 object 时，它会与默认配置通过 Object.assign 合并。

比如，你可以通过 tools.lightningcssLoader.exclude 来关闭 vendor prefixes 的添加，此时你可以使用 PostCSS 的 autoprefixer 插件来添加 vendor prefixes。

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

#Function 类型

当 tools.lightningcssLoader 是一个 function 时，默认选项会作为第一个参数传入，你可以直接修改这个对象，也可以返回一个新的对象作为最终使用的选项。比如：

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

#CSS 压缩

启用 CSS 压缩 后，Rsbuild 会根据样式的引入方式进行压缩：

• 通过 ?inline 或 ?url 导入的样式，以及通过 output.injectStyles 注入的样式，由 lightningcss-loader 压缩。
• 其余样式会提取为独立的 CSS 文件，再由 CSS 压缩器处理。

#禁用 loader

将 tools.lightningcssLoader 设置为 false，可以禁用 Rsbuild 内置的 lightningcss-loader：

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