使用npm build构建项目时出现PostCSS错误求助

问题原因 #

你导入的这些Material Design压缩版CSS（.min.css）文件中，包含格式不规范的source map信息——其中original.line或original.column不是有效数字，触发了PostCSS的source map验证逻辑报错。

解决方案 #

方案1：禁用CSS的source map生成

修改你的Vite配置文件（vite.config.js/vite.config.ts），关闭CSS的source map生成，绕过这个验证问题：

export default {
  css: {
    sourcemap: false // 生产构建时禁用CSS source map
  }
}

方案2：改用未压缩版Material CSS文件

把导入语句中的.min.css替换为普通.css，未压缩版本的文件通常带有规范的source map，或者不会触发该验证问题：

/* 替换前 */
@import "@material/button/dist/mdc.button.min.css";

/* 替换后 */
@import "@material/button/dist/mdc.button.css";

方案3：配置PostCSS忽略source map验证

在项目根目录创建/修改postcss.config.js，强制关闭source map相关的注释和内联信息：

module.exports = {
  map: {
    inline: false,
    annotation: false,
    sourcesContent: false
  },
  // 保留你原本的PostCSS插件配置
  plugins: {
    // 比如 autoprefixer 等
  }
}

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