PurgeCss在Nextjs 13版本中不工作

fhity93d  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(107)

我试图减少我的NextJS项目中的CSS的大小。我在看https://purgecss.com/guides/next.html这本书。
下面是我的style.css的内容

@import url('/assets/css/bootstrap.min.css');
@import url('/assets/css/fonts.css');
@import url('/assets/css/flaticon.css');
@import url('/assets/css/font-awesome.css');
@import url('/assets/css/select2.min.css');
@import url('/assets/css/nice-select.css');
@import url('/assets/css/owl.carousel.css');
@import url('/assets/css/owl.theme.default.css');
@import url('/assets/css/reset.css');
@import url('/assets/css/style.css');
@import url('/assets/css/responsive.css');

以下是我使用的nextjs版本。

"next": "13.1.1",

我已经在我的根目录下创建了postcss.js文件。

"plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ],
    [
      '@fullhuman/postcss-purgecss',
      {
        content: [
            './pages/**/*.{js,jsx,ts,tsx}',
            './components/**/*.{js,jsx,ts,tsx}'
        ],
        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body"]
      }
    ],
  ]
}

我试过npm run build && npm start。当我试图访问我的网站时,它仍然要求所有这些文件,没有任何变化。
我是否需要使用以下内容:

const withPurgeCss = require("next-purgecss");

module.exports = withCss(withPurgeCss());

但是在文档中,我们只需要在< 9.3的版本中更改next.config。我也试过了,但还是出错了。
已尝试在PurgeCSS does not remove unused CSS from NextJS project解决方案,但不工作。
有什么建议吗?

m4pnthwp

m4pnthwp1#

也许您想检查content列表是否与项目中的文件夹实际匹配。考虑新的Next.js使用app而不是pages
所以你可能想把它改成:

content: [
            './app/**/*.{js,jsx,ts,tsx}',
            './components/**/*.{js,jsx,ts,tsx}'
        ],

相关问题