Purge-css 正在删除所有 CSS 样式，而不仅仅是未使用的样式

Question

我正在尝试使用 purgecss 删除任何未使用的 css，尤其是 Bootstrap 中未使用的 css。使用 Purgecss 设置，我的所有 css 都被删除，只剩下内联样式。这意味着 purgecss 正在删除所有 css 类的样式，而不仅仅是那些没有被使用的。我想让我的配置正确，以便只删除未使用的 css 样式。

由于我的 React 应用程序也使用 Post-css，因此我尝试使用 postcss-purgecss plugin，并按照该链接中的说明进行设置。

这发生在开发和生产模式中。

您可以在this branch of this github repo上测试问题

您可以在此网址https://purge-css-failing.netlify.app/查看发生的事情的结果

---

postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
  plugins: [
    purgecss({
        content: ['./src/**/*.html']
    }),
  ]
};

webpack.config.js

const path = require('path');
var webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { GenerateSW } = require("workbox-webpack-plugin");
const WebpackPwaManifest = require("webpack-pwa-manifest");

'use strict';
module.exports = {
  target: "web",
  mode: "development",
  entry: "./src/entryPoints/index.jsx",
  devtool: "source-map",
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
    filename: "[name]/[name].js",
  },
  module: {
    rules: {
      test: /\.(scss|css)$/,
      use: [
        MiniCssExtractPlugin.loader, // creates style nodes from JS strings
        {
          loader: "css-loader", // translates CSS into CommonJS
          options: {
            importLoaders: 1,
          },
        },
        "postcss-loader", // post process the compiled CSS
        "sass-loader", // compiles Sass to CSS, using Node Sass by default
      ],
    }
  },
  devServer: {...},
  resolve: {...},
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("development"),
      },
    }),
    new HtmlWebpackPlugin({
      template: "./html/index.html",
      filename: "./index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[name].css",
    }),
    new WebpackPwaManifest({
      icons: [
        {
          src: path.resolve(
            "src/assets/images/Favicon/android-chrome-192x192Circle.png"
          ),
          sizes: "192x192",
          type: "image/png",
          purpose: "any maskable",
        },
        {
          src: path.resolve("src/assets/images/logo/icon.png"),
          sizes: "512x512",
          type: "image/png",
        },
      ],
      name: "Example",
      short_name: "Example",
      orientation: "portrait",
      start_url: "/",
      theme_color: "#000000",
      background_color: "#ffffff",
      description: "Description",
      display: "standalone", //property set to fullscreen, standalone, or minimal-ui
      prefer_related_applications: false, //Says if you would prefer that the user download a mobile app from the app store or something
    }),
    new GenerateSW({
      // option: 'value',
    }),
  ],
};

Answer 1

由于您的应用是 ReactJS 应用，因此您希望清除为开发或生产环境编译的 Javascript 包中未使用的 css 类。

您可以更新您的 postcss.config.js 文件以匹配 .js 文件。

module.exports = {
  plugins: [
    purgecss({
      content: ["./src/**/*.js"],
      // Treat every word in the bundle as a CSS selector
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []

    }),
  ]
};