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

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

1 个答案: