Vue项目执行cnpm run build打包失败，报EISDIR错误求助

错误信息 #

PS E:\Important(E)\zhiranbangbang-front\zhiranbangbang> cnpm run build

zhiranbangbang@0.0.0 build
vite build

vite v5.2.8 building for production...
✓ 516 modules transformed.
x Build failed in 1.56s
error during build:
Error: [vite:css] [postcss] EISDIR: illegal operation on a directory, read
file: E:/Important(E)/zhiranbangbang-front/zhiranbangbang/src/views/Login.vue?vue&type=style&index=0&scoped=09bcde41&lang.scss:undefined:NaN

排查与解决步骤 #

• 检查Login.vue的样式引入
  打开src/views/Login.vue，查看<style>部分：

  • 确认@import语句的路径是否指向具体文件而非目录，比如避免@import './styles'这种写法，要改成@import './styles/login.scss'；
  • 如果使用了src属性引入外部样式（如<style lang="scss" src="./xxx">），确保路径指向的是SCSS文件，不是目录。

• 校验main.scss中的引入逻辑
  虽然已确认main.js中引入了./assets/main.scss，但要检查main.scss内部的@import语句：

  • 排查是否存在引用目录的情况，比如误写@import './assets/styles'，应修正为具体文件名；
  • 若需引入目录下所有SCSS文件，可使用@import './assets/styles/*.scss'（需确保PostCSS支持通配符，可安装postcss-import插件配合使用）。

• 清理缓存并重新构建

  • 执行cnpm cache clean --force清除npm缓存；
  • 删除项目根目录下的node_modules/.cache文件夹（Vite的缓存目录）；
  • 重新执行cnpm install和cnpm run build。

• 规避路径中的特殊字符
  注意到项目路径包含Important(E)这种带括号的特殊字符，可能导致Vite/PostCSS路径解析异常。尝试将项目移动到不含特殊字符的路径下（如E:/zhiranbangbang-front/zhiranbangbang），再重新打包。

• 检查Vite配置文件
  打开vite.config.js，确认CSS相关配置是否正常：

  • 确保css.postcss配置没有错误的路径映射或插件设置；
  • 若自定义了resolve.alias，检查别名是否指向正确的文件而非目录。

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