Vue3项目yarn serve正常但yarn build失败，CSS压缩报错求助

针对你遇到的yarn serve正常但yarn build时触发@intervolga/optimize-cssnano-plugin的CSS压缩报错问题，结合你的技术栈（Vue3.2、webpack4、vue-cli4），给出以下具体解决思路：

• 锁定兼容版本的@intervolga/optimize-cssnano-plugin
  该插件的新版本可能与webpack4存在兼容性问题，建议锁定到对webpack4支持更稳定的版本：

  yarn add @intervolga/optimize-cssnano-plugin@1.0.6 --dev
  

  安装完成后重新执行yarn build测试。

• 排查TailwindCSS与daisyUI的样式冲突或语法问题
  虽然开发环境能正常运行，但压缩工具对CSS语法的校验更严格：

  • 临时在tailwind.config.js中注释掉daisyUI的配置，执行yarn build，如果报错消失，说明是daisyUI的特定样式导致，尝试升级daisyUI到与当前TailwindCSS版本匹配的稳定版；
  • 检查自定义TailwindCSS规则中是否存在无效语法（比如未闭合的括号、错误的伪类选择器）。

• 替换为官方CSS压缩插件
  如果@intervolga的插件持续出问题，可替换为webpack官方的css-minimizer-webpack-plugin（兼容webpack4的版本）：

  1. 安装插件：

     yarn add css-minimizer-webpack-plugin@3.4.1 --dev
     

  2. 在vue.config.js中修改配置：

     const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
     module.exports = {
       configureWebpack: {
         optimization: {
           minimizer: [
             new CssMinimizerPlugin()
           ]
         }
       }
     }
     

  3. 移除原有的@intervolga/optimize-cssnano-plugin依赖后重新build。

• 清理缓存后重装依赖
  依赖缓存或锁文件可能导致版本冲突，执行以下步骤：

  yarn cache clean
  rm -rf node_modules yarn.lock
  yarn install
  yarn build
  

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