添加Flowbite切换按钮后PostCSS-is-pseudo-class报错求助

问题根源 #

1. PostCSS配置双重定义：同时在postcss.config.js和Webpack的postcss-loader内联配置中定义插件，导致样式处理流程混乱，Flowbite的复杂选择器被错误提前处理。
2. postcss-preset-env兼容性冲突：插件默认尝试将:is()伪类降级为旧浏览器兼容写法，但Flowbite切换按钮的复杂选择器无法被降级，触发报错。
3. Webpack未复用外部PostCSS配置：Webpack中的postcss-loader未使用外部配置文件，而是重新定义插件，导致Tailwind和Flowbite的样式处理顺序错误。

解决方案 #

步骤1：统一PostCSS配置，移除Webpack内联插件定义 #

修改Webpack中处理.s?css的规则，让postcss-loader自动读取外部的postcss.config.js，删除内联的postcssOptions：

// Webpack配置中对应的css规则
{
  test: /\.s?css$/i,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'postcss-loader', // 自动读取根目录下的postcss.config.js
  ],
}

若postcss.config.js不在默认路径，可明确指定：

{
  test: /\.s?css$/i,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        config: {
          path: path.resolve(__dirname, '../postcss.config.js'), // 替换为你的实际路径
        },
      },
    },
  ],
}

步骤2：更新postcss.config.js，整合插件并配置postcss-preset-env #

将Webpack内联的postcss-preset-env、pixrem合并到外部配置，明确允许:is()伪类（你的browserslist设置为last 2 versions，现代浏览器均支持该特性）：

module.exports = {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    "postcss-preset-env": {
      features: {
        'is-pseudo-class': true, // 启用:is()伪类，跳过降级
      },
      browsers: 'last 2 versions',
      stage: 0, // 启用所有CSS特性支持
    },
    autoprefixer: {},
    pixrem: {}, // 无需兼容IE可移除该插件
  },
};

步骤3：确认Tailwind配置正确引入Flowbite #

确保tailwind.config.js中已包含Flowbite的内容扫描和插件引用：

module.exports = {
  content: [
    // 你的Django模板路径
    "./templates/**/*.html",
    "./frontend/**/*.js",
    // 必须添加该行以扫描Flowbite组件
    "./node_modules/flowbite/**/*.js",
  ],
  plugins: [
    require('flowbite/plugin'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
};

验证修复 #

1. 清理旧构建文件：

rm -rf static/js static/css

2. 重新安装依赖（可选，确保版本一致）：

npm install

3. 运行构建命令：

npm run build
# 或开发模式
npm run dev

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