Next.js开发环境样式导入正常 生产环境react-owl-carousel2等样式失效

你启用了仅在生产环境生效的@fullhuman/postcss-purgecss插件，当前配置仅扫描项目内./components/、./pages/目录下的代码，第三方组件库的样式类不会被识别为已使用样式，会在生产构建时被自动清除。开发环境未开启PurgeCSS，因此样式表现正常。

另外你代码中import styles from "react-responsive-carousel/lib/styles/carousel.min.css";属于错误写法：全局样式文件不能使用CSS Modules的命名导入语法，需改为普通导入。

• 第一步：修正样式导入语法
  将App组件里的错误导入替换为：

// 原错误写法 import styles from "react-responsive-carousel/lib/styles/carousel.min.css";
import "react-responsive-carousel/lib/styles/carousel.min.css";

• 第二步：调整postcss.config.js配置，给第三方库样式类添加白名单
  修改PurgeCSS配置，增加safelist规则，匹配所有第三方轮播库的样式类：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === "production"
      ? {
          "@fullhuman/postcss-purgecss": {
            content: ["./components/**/*.js", "./pages/**/*.js"],
            defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
            // 新增白名单规则，匹配轮播库的样式类前缀
            safelist: [/^owl-/, /^carousel/]
          }
        }
      : {})
  }
};

如果后续有其他第三方库样式被误删，只需将对应样式类的前缀加入safelist数组即可。

如果使用的是Tailwind CSS v3及以上版本，也可以移除单独配置的@fullhuman/postcss-purgecss插件，直接在tailwind.config.js中配置content扫描规则，同时将第三方库的样式类加入Tailwind自带的safelist配置即可，逻辑和上述方案完全一致。

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