React项目构建时TailwindCSS编译失败：Css Minimizer插件报错

算力阿峰

2026-7-9

React生产构建Css Minimizer插件报错：Unexpected '/'

问题重现

执行生产构建时，流程卡在“Creating an optimized production build...”后提示“Failed to compile.”，具体报错来自Css Minimizer插件，处理static/css/main.9a45e1a9.css时抛出：

Error: Unexpected '/'. Escaping special characters with \ may help.

解决步骤

检查CSS注释格式：生产环境下部分CSS压缩器不支持//单行注释，全部替换为/* ... */多行注释，同时确保所有注释都正确闭合，避免未闭合的注释导致解析混乱。
排查特殊字符使用：重点检查CSS属性值（比如content属性）、选择器中的斜杠。例如在content中使用斜杠时，若作为字符串直接写content: '/'即可；如果是在属性选择器（如div[data-path='/home']）中，部分压缩工具要求转义为div[data-path='\/home']。
清理第三方样式：如果引入了第三方UI库或自定义样式，排查最近新增的样式代码，尤其是包含特殊选择器（伪元素、复杂属性选择器）或特殊字符的部分，临时注释掉可疑代码后重新构建，定位问题来源。
调整Css Minimizer配置：如果使用create-react-app，可通过craco或react-app-rewired修改webpack配置，给css-minimizer-webpack-plugin添加更宽松的解析规则。示例配置：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: ['default', {
            discardComments: { removeAll: true },
            normalizeWhitespace: true
          }]
        }
      })
    ]
  }
};