Next.js 13中npm脚本无法读取.env.local环境变量怎么解决？

直接运行yarn chromatic时，Next.js不会自动加载.env.local里的环境变量——这个文件默认仅在next dev/next build这类Next.js自身命令的进程中生效。给你两个实用的解决办法：

方案1：用dotenv-cli（推荐，跨平台友好） #

这是最省心的方式，专门用于给脚本加载.env文件：

1. 安装依赖：

yarn add dotenv-cli --dev
# 或用npm
npm install dotenv-cli --save-dev

2. 修改package.json里的chromatic脚本：

"scripts": {
  "chromatic": "dotenv -e .env.local -- chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
}

dotenv -e .env.local会先把指定文件里的变量加载到当前环境，后续运行的chromatic命令就能正常读取$CHROMATIC_PROJECT_TOKEN了。

方案2：纯Shell命令（无需额外依赖） #

如果不想新增依赖，可以用bash命令手动导出变量：
修改scripts为：

"scripts": {
  "chromatic": "export $(grep -v '^#' .env.local | xargs) && chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
}

原理是先过滤掉.env.local里的注释行，把每行键值对转换成环境变量导出，再执行chromatic命令。注意这个写法仅适用于bash类shell（Linux/macOS/WSL），Windows Cmd/PowerShell需要调整对应命令。

额外注意 #

• 确保.env.local在项目根目录，变量格式为CHROMATIC_PROJECT_TOKEN=你的密钥，不用加引号，也无需加NEXT_PUBLIC_前缀（该前缀是给前端代码用的，脚本里直接用原始变量名即可）。
• 确认.env.local已被.gitignore忽略（Next.js默认会处理，别把密钥提交到仓库）。

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