GitHub CI/CD构建报错：postcss-calc词法错误，本地运行正常

在GitHub CI/CD部署前端代码到服务器时构建失败，本地MacBook和Windows环境（相同Node、npm、yarn版本）可正常构建，但CI流程报错。

工作流文件 #

name: Build develop
'on':
  push:
    branches:
      - develop
  workflow_dispatch: null
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18.12.0
      - name: cp env
        run: cp ./.env.develop ./.env
      - name: Build product
        run: |
          yarn cache clean
          yarn install
          yarn build
      - name: list folder
        run: ls -l
      - name: install ssh keys
        run: |
          install -m 600 -D /dev/null ~/.ssh/id_rsa
          echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa
          ssh-keyscan -H ${{ secrets.SSH_HOST }} > ~/.ssh/known_hosts
      - name: scp folder to server
        run: "scp -r ./build/* root@${{ secrets.SSH_HOST }}:/var/www/test/develop/test-fe"

报错信息 #

Warning
(1:5113) autoprefixer: end value has mixed support, consider using flex-end instead

Warning
(1:60257) autoprefixer: end value has mixed support, consider using flex-end instead

static/css/main.0bc37bf3.css from Css Minimizer plugin
postcss-calc:: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: auto + var(--pc-choice-space-0) + var(--pc-choice-space-0)
^..^ webpack://./node_modules/@shopify/polaris/build/esm/styles.css:1684:2591

static/css/main.0bc37bf3.css from Css Minimizer plugin
postcss-calc:: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: auto + var(--pc-choice-space-0) + var(--pc-choice-space-0)
^..^ webpack://./node_modules/@shopify/polaris/build/esm/styles.css:1684:2765


error Command failed with exit code 1.
Error: Process completed with exit code 1.

1. 锁定依赖版本（确保CI与本地依赖完全一致） #

本地执行yarn install后生成的yarn.lock文件提交到仓库，修改CI工作流中的Build product步骤，使用锁定安装命令避免依赖版本差异：

yarn cache clean
yarn install --frozen-lockfile
yarn build

2. 调整postcss-calc配置兼容特殊语法 #

postcss-calc旧版本无法解析auto + var()这类表达式，在项目的postcss.config.js中添加配置：

module.exports = {
  plugins: {
    'postcss-calc': {
      preserve: true,
      warnWhenCannotResolve: false
    },
    // 其他postcss插件配置
  }
};

如果使用css-minimizer-webpack-plugin，也可以升级插件版本或在webpack配置中调整minimizer选项，放宽语法检查规则。

3. 统一CI与本地的Yarn版本 #

本地执行yarn --version查看版本，在CI流程中指定该版本：

- uses: actions/setup-node@v3
  with:
    node-version: 18.12.0
    cache: 'yarn'
    yarn-version: '你的本地Yarn版本号' # 例如 1.22.19

4. 临时绕过错误（紧急部署用） #

添加环境变量禁用postcss-calc的严格检查：

POSTCSS_CALC_IGNORE_ERRORS=true yarn build

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