Next.js PurgeCSS不会从NextJS项目中删除未使用的CSS

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

我正在使用以下文档：

我的下一个.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} />
      </>
    )
  }
}

从“React”导入React
从“下一个/应用程序”导入应用程序
导出默认类MyApp扩展应用程序{
render（）{
const{Component，pageProps}=this.props
返回(
{`
.purgecss测试{
颜色：红色；
}
`}
)
}
}

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

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

.purgecss测试{颜色：红色；}

尝试根据此页面自定义PostCSS（忽略tailwindcss）：

稍微简化一点，安装

@fullhuman/postsss purgecss

和

postsss preset env

，然后在顶级目录中创建一个

postsss.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'
    ]
};

module.exports={
插件：[
[
“@fullhuman/postcss purgecss”，
{
内容：[
“./pages/***.{js，jsx，ts，tsx}”，
“./components/***.{js，jsx，ts，tsx}”
],
defaultExtractor:content=>content.match（/[\w-/：]+）（？我遇到了相同的问题，我遵循了