Ubuntu环境下Vite构建报错：无法解析CSS导入路径

问题现象 #

在Ubuntu 20.04环境执行yarn build时，Vite抛出CSS路径解析错误：将./开头的相对路径错误解析到项目根目录，导致目标CSS文件找不到。但TypeScript编译（tsc）无异常，具体报错如下：

transforming (211) node_modules/@mswjs/interceptors/lib/utils/uuid.jsUnable to resolve `@import "./textbookList.css"` from /home/user-name/myproject/src/assets/css/pages/myModule
✓ 217 modules transformed.
✓ built in 8.49s
[vite:css] [postcss] ENOENT: no such file or directory, stat '/home/user-name/myproject/myModuleCSS.css'
file: /home/user-name/myproject/src/assets/css/index.css:undefined:undefined
error during build:
Error: [postcss] ENOENT: no such file or directory, stat '/home/user-name/myproject/myModuleCSS.css'
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

问题CSS代码（位于src/assets/css/pages/myModule目录下）：

@import "./myModuleCSS.css";
@import "./myModuleCSS2.css";

原因分析 #

1. tsconfig.json中设置了baseUrl: "src"，配合vite-tsconfig-paths插件实现根路径导入，但该插件默认会处理所有文件类型的路径解析，包括CSS。它错误地将CSS文件内的相对路径（./）映射到项目根目录，而非当前CSS文件所在目录。
2. 你的unplugin-fixenv插件硬编码了development模式，可能干扰生产构建时的路径解析逻辑。

解决方案 #

方案1：限制vite-tsconfig-paths的处理范围 #

修改vite.config.ts，给vite-tsconfig-paths配置extensions选项，仅让它处理TS/JS类文件，排除CSS：

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";
import tsconfigPaths from "vite-tsconfig-paths";
import { createUnplugin } from "unplugin";

const unplugin = createUnplugin((mode: string) => {
  return {
    name: "unplugin-fixenv",
    transform(code) {
      if (code.includes("process.env.NODE_ENV")) {
        return code.replace(/_globalThis\$process\.env\.NODE_ENV/, `"${mode}"`);
      }
      return code;
    },
  };
});

export default ({ mode }: { mode: string }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
  return defineConfig({
    plugins: [
      react(), 
      svgr(), 
      tsconfigPaths({
        extensions: [".ts", ".tsx", ".js", ".jsx"] // 仅处理这些后缀的文件
      }), 
      unplugin.vite(mode) // 替换硬编码的"development"，使用传入的mode参数
    ],
    server: {
      port: 3000,
    },
    define: {
      "process.env.NODE_ENV": JSON.stringify(mode),
    },
  });
};

方案2：改用基于baseUrl的绝对路径导入CSS #

既然baseUrl设为src，可以将CSS中的相对路径改为从src出发的绝对路径：

@import "/assets/css/pages/myModule/myModuleCSS.css";
@import "/assets/css/pages/myModule/myModuleCSS2.css";

这样Vite会直接解析到src/assets/css/pages/myModule目录下的目标文件。

方案3：检查PostCSS插件配置 #

如果项目有单独的postcss.config.js文件，确认其中没有修改路径的插件，或调整postcss-import等插件的路径解析规则，确保兼容相对路径逻辑。

验证 #

修改后重新执行yarn build，确认报错消失，构建流程正常完成。

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