close
指南
配置
插件
API
博客
关于
贡献
指南
配置
插件
API
博客
关于
贡献

内置 lightningcss-loader

添加于 v1.0.0

builtin:lightningcss-loader 使用 Rspack 内置的 lightningcss 处理 CSS，它可以取代 postcss-loader 中的语法降低功能，从而使 CSS 转化更快。

示例

要在你的项目中使用 builtin:lightningcss-loader，你需要按如下方式配置它。

const rspack = require('@rspack/core');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'builtin:lightningcss-loader',
            options: {
              targets: 'ie 10',
            },
          },
          // ... other loaders
        ],
      },
    ],
  },
};

类型声明

你可以使用 @rspack/core 导出的 LightningcssLoaderOptions 类型来启用类型提示

  • rspack.config.js:
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'builtin:lightningcss-loader',
            /** @type {import('@rspack/core').LightningcssLoaderOptions} */
            options: {
              targets: 'ie 10',
            },
          },
          // ... other loaders
        ],
      },
    ],
  },
};

选项

以下是 builtin:lightningcss-loader 支持的配置。有关详细配置，请参考 lightningcss 文档

type LightningcssFeatureOptions = {
  nesting?: boolean;
  notSelectorList?: boolean;
  dirSelector?: boolean;
  langSelectorList?: boolean;
  isSelector?: boolean;
  textDecorationThicknessPercent?: boolean;
  mediaIntervalSyntax?: boolean;
  mediaRangeSyntax?: boolean;
  customMediaQueries?: boolean;
  clampFunction?: boolean;
  colorFunction?: boolean;
  oklabColors?: boolean;
  labColors?: boolean;
  p3Colors?: boolean;
  hexAlphaColors?: boolean;
  spaceSeparatedColorNotation?: boolean;
  fontFamilySystemUi?: boolean;
  doublePositionGradients?: boolean;
  vendorPrefixes?: boolean;
  logicalProperties?: boolean;
  selectors?: boolean;
  mediaQueries?: boolean;
  color?: boolean;
};

type LightningcssLoaderOptions = {
  minify?: boolean;
  errorRecovery?: boolean;
  targets?: string[] | string;
  include?: LightningcssFeatureOptions;
  exclude?: LightningcssFeatureOptions;
  draft?: Drafts;
  nonStandard?: NonStandard;
  pseudoClasses?: PseudoClasses;
  unusedSymbols?: Set<String>;
};

目标

browserslist 查询字符串。

以下是一些设置目标的示例。

  • 设置 browserslist 查询字符串
const loader = {
  loader: 'builtin:lightningcss-loader',
  /** @type {import('@rspack/core').LightningcssLoaderOptions} */
  options: {
    targets: 'ie 10',
  },
};
  • 设置 browserslist 查询字符串数组
const loader = {
  loader: 'builtin:lightningcss-loader',
  /** @type {import('@rspack/core').LightningcssLoaderOptions} */
  options: {
    targets: ['chrome >= 87', 'edge >= 88', '> 0.5%'],
  },
};