React+Rails项目webpack编译出现Custom property ignored警告如何解决？

问题原因 #

该警告由两个兼容问题叠加触发：

• react-bootstrap@1.6.3 官方默认适配 Bootstrap 4 版本，而项目安装的是 bootstrap@5.1.1，大版本不匹配导致样式规则校验异常
• 项目依赖的 postcss-cssnext@3.1.0 已经停止维护，其内置的自定义属性校验规则要求所有CSS变量必须定义在顶级:root选择器下，但Bootstrap 5支持在普通类选择器中定义局部CSS变量，不符合旧版校验规则从而触发警告，该警告不会影响实际功能运行。

方案1：根本修复（推荐） #

• 升级react-bootstrap到适配Bootstrap 5的2.x版本，原生兼容Bootstrap 5的样式规则

npm install react-bootstrap@2

• 替换已废弃的postcss-cssnext为官方维护的postcss-preset-env，旧版校验规则已经更新，不会再误报Bootstrap 5的合法局部CSS变量

npm uninstall postcss-cssnext
npm install postcss-preset-env --save-dev

• 修改项目postcss配置（通常为postcss.config.js或webpack配置中的postcss-loader参数），将postcss-cssnext的引用替换为postcss-preset-env即可。

方案2：直接屏蔽警告（无需修改依赖版本） #

如果暂时不打算调整依赖版本，可直接关闭postcss的自定义属性校验：
找到项目中postcss-cssnext的配置项，添加customProperties: false参数关闭对应校验即可，示例配置如下：

module.exports = {
  plugins: [
    require('postcss-cssnext')({
      features: {
        customProperties: false // 关闭CSS变量位置校验
      }
    })
  ]
}

如果是webpack配置中内嵌的postcss规则，在对应的postcss-loader配置中添加上述参数即可生效。

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