迁移Vue 2.7到Vite后Docker构建失败：bulma包解析错误

背景 #

正在将Vue 2.7.14应用迁移至Vite，构建Docker镜像时遇到Scss包相关错误。

Dockerfile #

FROM node:20.5-alpine AS base
WORKDIR /app
COPY package*.json pnpm-lock.yaml /app
RUN apk add --no-cache git \
    && corepack enable \
    && pnpm config set store-dir /app/.pnpm-store \
    && pnpm config set package-import-method copy

FROM base AS prod-deps
RUN pnpm fetch --prod \
    && pnpm install --prefer-offline --ignore-scripts --frozen-lockfile --prod

FROM base AS build
COPY . /app
RUN pnpm fetch \
    && pnpm install --prefer-offline --ignore-scripts --frozen-lockfile \
    && pnpm build

FROM base AS deploy
COPY --from=prod-deps /app/node_modules /app/node_modules
COPY --from=build /app/dist /app/dist
EXPOSE 8080
CMD ['/bin/sh', 'start_compose.sh']

main.ts中引入主Scss文件，该文件会导入其他Scss文件：

main.ts #

import Vue from 'vue';
import App from '@/App.vue';
import { useRouter } from '@/router';
import Buefy from 'buefy';
import '@/assets/scss/main.scss';

Vue.config.productionTip = false;
Vue.use(Buefy, {
  defaultIconPack: 'mdi',
});

new Vue({
  router: useRouter(),
  render: (h) => h(App),
}).$mount('#app');

main.scss #

/* SCSS manifest file */

/* Bulma utilities */
@import 'bulma/sass/utilities/initial-variables';
@import 'bulma/sass/utilities/functions';
...

问题 #

构建镜像时触发以下错误：

476.8 > placemake-website@1.0.11 build /app
476.8 > vite build
476.8 
477.6 vite v4.4.9 building for production...
478.0 transforming...
491.1 file:///app/node_modules/.pnpm/vite@4.4.9_sass@1.66.1/node_modules/vite/dist/node/chunks/dep-df561101.js:28691
491.1     throw new Error(`Failed to resolve entry for package "${id}". ` +
491.1           ^
491.1 
491.1 Error: Failed to resolve entry for package "bulma". The package may have incorrect main/module/exports specified in its package.json.
491.1     at packageEntryFailure (file:///app/node_modules/.pnpm/vite@4.4.9_sass@1.66.1/node_modules/vite/dist/node/chunks/dep-df561101.js:28691:11)
491.1     at resolvePackageEntry (file:///app/node_modules/.pnpm/vite@4.4.9_sass@1.66.1/node_modules/vite/dist/node/chunks/dep-df561101.js:28688:5)
491.1     at tryNodeResolve (file:///app/node_modules/.pnpm/vite@4.4.9_sass@1.66.1/node_modules/vite/dist/node/chunks/dep-df561101.js:28419:20)
491.1     at Context.resolveId (file:///app/node_modules/.pnpm/vite@4.4.9_sass@1.66.1/node_modules/vite/dist/node/chunks/dep-df561101.js:28180:28)
491.1     at Object.resolveId (file:///app/node_modules/.pnpm/vite@4.4.9_sass@1.66.1/node_modules/vite/dist/node/chunks/dep-df561101.js:44207:64)
491.1     at async Object.<anonymous> (file:///app/node_modules/.pnpm/vite@4.4.9_sass@1.66.1/node_modules/vite/dist/node/chunks/dep-df561101.js:65837:21)
491.1 
491.1 Node.js v20.5.1
491.2  ELIFECYCLE  Command failed with exit code 1.

解决方法 #

1. 配置Vite的Scss预处理器路径 #

Vite的模块解析逻辑与Webpack不同，默认无法直接识别bulma/sass/xxx这种导入路径。在vite.config.ts中添加Scss的includePaths配置，让预处理器直接从node_modules查找依赖：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue2';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        includePaths: ['./node_modules']
      }
    }
  }
});

添加后，main.scss中的原导入语句即可正常解析。

2. 修正Bulma导入路径（备选方案） #

如果不想修改Vite配置，可直接修改main.scss中的导入路径，使用基于项目根目录的相对路径指向node_modules中的Bulma文件：

/* SCSS manifest file */

/* Bulma utilities */
@import '../../node_modules/bulma/sass/utilities/initial-variables';
@import '../../node_modules/bulma/sass/utilities/functions';
...

路径需根据main.scss在项目中的实际位置调整。

3. 检查Bulma依赖与版本 #

• 确认package.json中已正确声明Bulma依赖：

  {
    "dependencies": {
      "bulma": "^0.9.4",
      // 其他依赖
    }
  }
  

• 若使用旧版Bulma，可能存在package.json导出配置不全的问题，执行命令升级到最新稳定版：

  pnpm update bulma
  

4. 确保Docker构建依赖完整 #

Docker的build阶段已执行pnpm install --frozen-lockfile，可确认构建日志中是否有Bulma相关的安装记录，若存在缓存问题，可在构建前清理pnpm缓存：
在Dockerfile的build阶段添加清理命令：

FROM base AS build
COPY . /app
RUN pnpm store prune \
    && pnpm fetch \
    && pnpm install --prefer-offline --ignore-scripts --frozen-lockfile \
    && pnpm build

内容的提问来源于stack exchange，提问作者anti-destin