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

Posted 2023-03-06

【中文标题】Purge-css 正在删除所有 CSS 样式，而不仅仅是未使用的样式

【英文标题】：Purge-css is removing all css stylings instead of just the unused ones

【发布时间】：2021-08-04 23:58:08

【问题描述】：

我正在尝试使用 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',
    ),
  ],
;

【问题讨论】：

“这是在开发模式下发生的”，这是否意味着它不会在生产模式下发生？

@Barthy 在生产模式下也发生了

你好。我提出的解决方案与 Oluwafemi 的答案相同。它工作正常。再试一次，但不要忘记在每次更改配置文件后重新启动npm start dev-server。另外，我建议将 html 和 js 扩展名都保留在 content 数组中。

【参考方案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) || []

    ),
  ]
;

【讨论】：

我遇到了和以前一样的问题

在您提供的配置中没有跳出任何内容。在开发模式下，您的资产是否捆绑在 ./src 以外的部分？

是的，它们都被压缩成一个./main.css 文件，我有很多带有index.js 和style.scss 的文件夹，而index.js 有一行看起来像import './style.scss' . MiniCssExtractPlugin 是将所有 css 捆绑到 main.css 中的东西。我想我可能不得不在调用 MiniCssExtractPlugin 之前调用 purgecss

你可以在github.com/samgermain/react-boiler-plate/tree/purgecss查看repo，在purge-css-failing.netlify.app查看结果

A main.css 在我构建您共享的存储库时输出。你能分享一个可以重现这个问题的分支吗？