GitHub Action中构建Vite+Shopify Polaris应用失败求助

问题核心 #

你遇到的是Shopify Polaris组件在CI构建时无法解析SCSS文件的问题：本地构建正常，但GitHub Action中报错找不到.scss.js文件（实际仅存在同名.scss文件），根源在于CI环境的依赖配置、Vite解析规则与本地不一致。

具体解决方向 #

1. 修复npm依赖安装命令的语法错误 #

你的GitHub Action中安装依赖的命令存在逻辑错误：

npm install -D sass npm ci && npm run build

这条命令会错误地将npm和ci当作包名安装，完全不符合预期。正确的执行顺序是先安装项目依赖，再执行构建：

修改Action中的步骤：

- name: Install npm dependencies
  run: |
    npm ci
    npm install -D sass
    npm run build

更规范的方式是把sass添加到package.json的devDependencies中，提交后直接用npm ci即可自动安装所有依赖，无需单独执行npm install。

2. 安装sass核心依赖 #

sass-loader只是Vite的SCSS加载器，本身依赖sass（dart-sass）来编译SCSS文件。你仅安装了sass-loader，但缺少核心的sass依赖，这会导致CI环境无法处理SCSS文件，进而出现解析错误。

本地执行以下命令并提交依赖文件：

npm install -D sass

3. 配置Vite的文件解析规则 #

Vite默认的扩展名解析列表可能不包含.scss，或者Polaris的导入方式需要额外配置。在vite.config.js中添加如下配置，确保Vite能正确识别SCSS文件：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.scss'],
    // 若仍有问题，可添加Polaris路径别名
    alias: {
      '@shopify/polaris': '@shopify/polaris/build/esm',
    },
  },
});

4. 对齐本地与CI的Node版本 #

本地使用的Node版本可能与CI环境的16.x不一致，部分Polaris版本对Node版本有明确要求。如果本地使用的是18.x版本，可修改CI的Node版本配置：

- uses: actions/setup-node@v3
  with:
    node-version: 18
    cache: "npm"

5. 清理CI环境缓存 #

GitHub Action的npm缓存可能残留旧依赖，导致构建异常。可在安装依赖前添加清理步骤：

- name: Clean npm cache
  run: npm cache clean --force

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