React18手动配置项目中chromatic.config.json读取环境变量求助

核心原因 #

chromatic.config.json是静态JSON文件，不支持环境变量插值，也不会自动加载.env文件；你用的${{CHROMATIC_LOCAL_PROJECT_ID}}是GitHub Actions的模板语法，本地环境无法解析，所以变量读取失败。

方案一：改用JavaScript格式的配置文件（推荐） #

1. 安装dotenv依赖，用于加载.env文件：

npm install dotenv --save-dev

2. 删除原有的chromatic.config.json，新建chromatic.config.js文件：

require('dotenv').config();

module.exports = {
  projectId: `Project:${process.env.CHROMATIC_LOCAL_PROJECT_ID}`,
  // 保留你原来的其他Chromatic配置项
};

3. 确保项目根目录的.env文件变量名正确：

CHROMATIC_LOCAL_PROJECT_ID=你的实际项目ID

4. 正常运行chromatic命令即可，Node会通过dotenv加载.env变量，配置文件能直接读取到。

方案二：用命令行参数传递（无需修改配置文件） #

1. 安装dotenv-cli，用于在命令行加载.env变量：

npm install dotenv-cli --save-dev

2. 修改package.json中的scripts命令，直接通过命令行传递projectId：

{
  "scripts": {
    "chromatic": "dotenv-cli chromatic --project-id=Project:$CHROMATIC_LOCAL_PROJECT_ID"
  }
}

3. 运行npm run chromatic，dotenv-cli会先加载.env里的变量，再传递给chromatic命令。

方案三：跨平台命令注入环境变量（适合CI/CD或特定场景） #

如果需要在不同操作系统下兼容，可使用cross-env配合dotenv：

1. 安装依赖：

npm install cross-env dotenv --save-dev

2. 修改scripts：

{
  "scripts": {
    "chromatic": "cross-env-shell 'chromatic --project-id=Project:$CHROMATIC_LOCAL_PROJECT_ID'"
  }
}

注意这里用cross-env-shell来支持变量插值，确保不同系统下都能解析环境变量。

内容的提问来源于stack exchange，提问作者Сергей Мирошник