Docker构建时Tailwind CSS编译进程无限挂起问题求助

问题重现 #

执行docker build -t project_name:tag .时，构建进程卡在npm run build的PostCSS执行步骤，日志停留在：

> cross-env NODE_ENV=production postcss ./src/styles.css -o ../static/css/dist/styles.css --minify

可能的解决方法 #

1. 修复目录权限与存在性 #

容器内目标输出目录../static/css/dist可能不存在或无写入权限，在Dockerfile中提前创建目录并设置正确权限：

FROM node:18 AS frontend

WORKDIR /app/static_src

# 提前创建输出目录并赋予node用户权限
RUN mkdir -p /app/static/css/dist && chown -R node:node /app/static

# 切换到非root的node用户执行后续命令
USER node

COPY ./apps/theme/static_src/package.json ./
COPY ./apps/theme/static_src/package-lock.json ./

RUN npm ci

COPY ./apps/theme/static_src/ ./

RUN npm run build

2. 降级Tailwind CSS到稳定版v3.x #

Tailwind v4属于较新的预览版本，可能存在与postcss-cli的兼容性问题，修改package.json中的依赖版本：

"devDependencies": {
    "tailwindcss": "^3.4.0",
    "@tailwindcss/postcss": "^3.4.0",
    // 其他依赖保持不变
}

删除本地package-lock.json后重新构建即可。

3. 清理缓存后重新构建 #

Docker或npm缓存可能导致异常，尝试清理缓存后重新构建：

# 清理Docker构建缓存
docker build --no-cache -t project_name:1.0 .

# 或者在npm ci时禁用缓存
RUN npm ci --no-cache

4. 验证源文件路径与构建命令 #

• 在Dockerfile中添加步骤验证src/styles.css是否存在：

  COPY ./apps/theme/static_src/ ./
  RUN ls -la ./src/  # 确认styles.css存在
  RUN npm run build
  

• 修改package.json中的build命令，确保目录操作更可靠：

  "build": "mkdir -p ../static/css/dist && rimraf ../static/css/dist && cross-env NODE_ENV=production postcss ./src/styles.css -o ../static/css/dist/styles.css --minify"
  

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