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

Question

我正在尝试使用 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;}

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