Laravel+laravel-mix+Bootstrap5.1.3生产构建postcss错误求助

• 增加调试环境变量输出指定模块日志
  执行命令前添加DEBUG环境变量即可输出对应模块的调试信息：
  • macOS/Linux环境：DEBUG=postcss*,sass-loader*,mini-css-extract-plugin* npm run prod
  • Windows CMD环境：set DEBUG=postcss*,sass-loader*,mini-css-extract-plugin* && npm run prod
  • Windows PowerShell环境：$env:DEBUG='postcss*,sass-loader*,mini-css-extract-plugin*'; npm run prod
    只指定postcss、sass-loader、css提取相关模块的日志，避免输出过多无关内容干扰定位。
• 修改Laravel Mix配置开启详细构建输出
  编辑项目根目录的webpack.mix.js文件，调整sass编译和webpack输出配置：

  mix.sass('resources/sass/app.scss', 'public/css', {
    sassOptions: {
      sourceMap: true,
      // 生产环境临时关闭css压缩，方便定位生成后的代码位置
      outputStyle: 'expanded'
    }
  })
  .options({
    postCss: [
      require('postcss-calc')({
        // 遇到无法计算的表达式时输出警告，不直接中断构建
        warnWhenCannotResolve: true
      })
    ]
  })
  .webpackConfig({
    // 开启webpack全量构建日志输出
    stats: 'verbose'
  })
  

• 单独编译SCSS文件排查问题
  直接使用sass命令行工具编译SCSS文件，输出完整的编译追踪栈：
  sass --verbose --trace resources/sass/app.scss output.css
  编译阶段的变量、样式错误会直接输出对应的源码位置，无需走完整的webpack构建流程。

你遇到的报错本质是postcss-calc插件尝试计算none - 1px这类非法数值表达式导致的，通常出现在覆盖Bootstrap变量时，错误地将边框、内边距这类数值类型的变量设置为none值，正确的做法应该是将对应变量设置为0。
如果需要临时绕过报错完成构建，可以在postcss-calc配置中添加preserve: true，保留原始calc表达式不做自动计算，后续再定位具体的变量配置问题。

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