PurgeCSS 不会从 NextJS 项目中删除未使用的 CSS答案

【问题标题】：PurgeCSS does not remove unused CSS from NextJS projectPurgeCSS 不会从 NextJS 项目中删除未使用的 CSS
【发布时间】：2020-04-13 07:27:50
【问题描述】：

我正在尝试使用 PurgeCSS 从我的 NextJS 项目中删除未使用的 CSS。但是，我很难将 PurgeCSS 最基本的集成到我的项目中。

我正在使用此文档：https://www.purgecss.com/guides/next。

我的 next.config 文件如下所示：

// next.config.js
const withCss = require('@zeit/next-css')
const withPurgeCss = require('next-purgecss')

module.exports = withCss(withPurgeCss())

这是我的组件：

import React from 'react'
import App from 'next/app'

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props

    return (
      <>
        <style jsx global>{`
          .purgecss-test {
            color: red;
          }
        `}</style>
          <Component {...pageProps} />
      </>
    )
  }
}

当我在我的代码库中对“purgecss-test”进行全局搜索时，我只得到上面组件中的一个结果，所以我希望在构建过程中删除该样式。但是，当我的应用程序构建并导航到页面并检查源代码时，我仍然可以在那里看到它：

<style amp-custom="">.purgecss-test{color:red;}

【问题讨论】：

我遇到了同样的问题，我关注了purgecss.com/guides/next.html#next-js-plugin

标签： next.js

【解决方案1】：

尝试根据此页面自定义 PostCSS（忽略 tailwindcss）：https://nextjs.org/learn/basics/assets-metadata-css/styling-tips

简单一点，安装@fullhuman/postcss-purgecss和postcss-preset-env，然后在顶层目录下创建一个postcss.config.js文件并在里面输入：

module.exports = {
    plugins: [
        [
            '@fullhuman/postcss-purgecss',
            {
                content: [
                    './pages/**/*.{js,jsx,ts,tsx}',
                    './components/**/*.{js,jsx,ts,tsx}'
                ],
                defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
            }
        ],
        'postcss-preset-env'
    ]
};

【讨论】：