如何根据 HTML 输出清除 CSS？

Posted 2023-03-05

【中文标题】如何根据 HTML 输出清除 CSS？

【英文标题】：How can I purge CSS based on the HTML output?

【发布时间】：2021-08-15 17:23:09

【问题描述】：

我目前正在处理 Next.js 中的一个项目，我们将自定义 SCSS 与 Bootstrap SCSS 和 React-Bootstrap 结合使用。我们注意到我们的 main.scss 文件（我们的自定义 SCSS 和 Bootstrap SCSS 捆绑在一起）变得太重了。

当我在 Chrome 中查看覆盖选项卡时，我注意到 95% 的 CSS 没有被使用。所以我想摆脱 Bootstrap SCSS 文件中所有未被使用的 CSS。

我发现您可以通过在 Next.js 中添加 postcss.config.js 文件然后在其中添加 purgeCSS (https://purgecss.com/guides/next.html) 来清除 CSS。

问题在于这是基于源代码（JS、JSX、TS、TSX 文件）的。 在源文件中，我们使用 react-bootstrap 组件，这些组件也使用了 Bootstrap SCSS 文件中的一些 CSS。 purgeCSS 没有注意到这一点，因为源代码中没有这些类。

这就是为什么我希望 purgeCSS 在 Next.js 的输出 HTML 上运行。 为此，我将package.json 中的build 任务调整为：

"build": "next build && purgecss --css ./.next/static/**/*.css  --content ./.next/server/**/*.html --output ./.next/static/css",

这很好，CSS 输出正是我想要的。但我不知道如何制作，所以 Next.js 实际上在网站上使用了这个 new CSS 文件，而不是 unoptimized CSS。有什么想法吗？

【参考方案1】：

如果您在 postcss.config.js 文件中使用带有安全列表属性的正则表达式，那么 purgecss 将正常工作。我们在 bootstrap-react、purgecss 和 next.js 中遇到了同样的问题。这是我们的 postcss.config.js：

module.exports = 
plugins: [
    
  "postcss-flexbugs-fixes",
  [
    "postcss-preset-env",
    
      autoprefixer:  flexbox: "no-2009" ,
      stage: 3,
      features:  "custom-properties": false 
    
  ],
  [
    "@fullhuman/postcss-purgecss",
    
      content: ['./components/**/*.js,jsx,ts,tsx', "./pages/**/*.js,jsx,ts,tsx"],
      css: ['./styles/**/*.css,scss'],
      defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
      safelist: 
          standard: ["html", "body", "btn" ], 
          deep: [/^col/, /^navbar/, /^nav/]
      
    
  ]
];

基本上，我添加了正则表达式以将所有以“col”、“navbar”和“nav”开头的类列入安全列表。只需检查任何未被拾取的类并添加相应的正则表达式即可。