迁移至Rsbuild时LESS模块:global语法触发警告的原因与解决

警告原因 #

CSS Modules 中的 :global()/:local() 是该规范的自定义语法，并不属于标准 CSS 的伪类/伪元素范畴。Rsbuild 内置的 CSS 语法校验工具会严格遵循 CSS 规范检查代码，因此会将这些自定义语法判定为无效伪类，从而抛出警告。

而你之前使用的 react-scripts/craco 要么未启用如此严格的 CSS 语法检查，要么对 CSS Modules 的自定义语法做了特殊兼容处理，所以迁移前没有出现这类警告。

是否可以忽略 #

可以忽略。从你描述的情况来看，构建结果符合预期，说明 Rsbuild 的 CSS Modules 处理逻辑已经正确识别并解析了 :global 语法，警告仅来自语法校验环节，不会影响最终产物的功能。但大量警告会干扰日志阅读，建议还是针对性抑制。

抑制警告的方法 #

最直接的方式是通过 Rsbuild 配置关闭 CSS 语法检查，或者针对性兼容 CSS Modules 语法：

方法1：关闭全局 CSS 语法检查 #

在 rsbuild.config.ts 的 output 配置中添加 disableCssSyntaxCheck: true，直接禁用对非标准 CSS 语法的校验：

export default defineConfig({
  // ...其他配置
  output: {
    distPath: {
      root: './build'
    },
    disableCssSyntaxCheck: true, // 新增配置项
  },
  // ...其他配置
});

方法2：调整 PostCSS 配置（精细化控制） #

如果你不想全局关闭语法检查，可以通过 tools.postcss 移除或调整相关校验插件。例如，过滤掉触发警告的 Stylelint 插件：

export default defineConfig({
  // ...其他配置
  tools: {
    postcss: (opts) => {
      opts.plugins = opts.plugins?.filter(plugin => {
        // 移除 Stylelint 插件，避免对 CSS Modules 语法的误判
        return plugin.postcssPlugin !== 'stylelint';
      });
    },
    // ...其他 tools 配置
  },
  // ...其他配置
});

方法3：优化 Less 编译配置 #

确保 Less 编译阶段正确处理 CSS Modules 语法，让后续校验环节接收到标准 CSS 代码：

pluginLess({
  lessLoaderOptions: {
    lessOptions: {
      modifyVars: modifyLessVars,
    },
    // 明确开启 CSS Modules 模式，让 loader 提前解析自定义语法
    modules: {
      mode: 'local',
    },
  },
}),

内容的提问来源于stack exchange，提问作者ezze