为什么npm 14.18.0环境下CSS变量var(--indigo)无法正常生效？

根因分析 #

• npm从8.9.4升级到14.18.0后，依赖安装时按照语义化版本规则拉取了更高版本的PostCSS生态依赖（核心是cssnano压缩插件、postcss-custom-properties或postcss-preset-env编译插件），新版本的默认配置变更或存在逻辑bug，会将原生CSS变量的--前缀错误移除，原本的var(--indigo)被错误处理为var(indigo)，浏览器无法识别该变量导致样式失效。
• 本地运行属于开发环境，默认不会开启CSS压缩和降级编译流程，因此样式正常；测试环境为生产构建模式，会触发CSS优化逻辑，才会暴露该问题。

修复方案 #

方案1：锁定兼容版本的CSS处理依赖 #

在package.json中添加对应配置强制固定依赖版本，避免拉取存在问题的新版本：

• 如果你使用npm管理依赖，新增overrides字段：

{
  "overrides": {
    "cssnano": "5.1.14"
  }
}

• 如果你使用yarn管理依赖，新增resolutions字段：

{
  "resolutions": {
    "cssnano": "5.1.14"
  }
}

配置完成后删除node_modules文件夹和package-lock.json/yarn.lock锁文件，重新执行依赖安装命令后构建测试即可。

方案2：修改PostCSS配置禁用错误优化项 #

在项目的postcss.config.js配置文件中，添加规则强制保留原生CSS变量不被处理：

module.exports = {
  plugins: [
    require('postcss-preset-env')({
      features: {
        'custom-properties': {
          preserve: true // 不静态替换CSS变量，保留原始写法
        }
      }
    }),
    require('cssnano')({
      preset: [
        'default',
        {
          reduceCustomProperties: false // 禁用cssnano对CSS变量的错误简化逻辑
        }
      ]
    })
  ]
}

方案3：SCSS转义临时规避 #

如果是SCSS文件中引用的变量出现该问题，可以用字符串转义写法避免预处理逻辑错误修改：

color: var(#{"--indigo"});

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