如何在Nuxt 3项目中临时禁用cssnano？（适配Unocss）

要解决Unocss和cssnano的兼容问题，你可以通过修改nuxt.config.ts中的PostCSS配置，直接排除cssnano插件来禁用它：

方法1：全局覆盖PostCSS插件列表 #

显式声明你需要保留的PostCSS插件，不包含cssnano，这样会覆盖Nuxt的默认配置：

export default defineNuxtConfig({
  postcss: {
    plugins: {
      'postcss-import': {},
      'postcss-url': {},
      'autoprefixer': {}
      // 移除默认的cssnano，即可禁用它
    }
  }
})

方法2：仅在生产环境禁用（推荐） #

因为Nuxt仅在生产环境默认启用cssnano，开发环境不会运行它，所以可以针对性地配置：

export default defineNuxtConfig({
  postcss: {
    plugins: process.env.NODE_ENV === 'production' 
      ? {
          'postcss-import': {},
          'postcss-url': {},
          'autoprefixer': {}
          // 生产环境不加载cssnano
        }
      : {} // 开发环境使用默认配置即可
  }
})

说明 #

Nuxt默认的PostCSS插件集合在生产环境包含cssnano，通过显式指定插件列表的方式，会完全替换默认配置，从而达到禁用cssnano的效果。如果你的项目中使用了其他PostCSS插件（比如Tailwind CSS），只需将对应的插件添加到上述配置中即可。

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