我试图减少我的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解决方案,但不工作。
有什么建议吗?
1条答案
按热度按时间m4pnthwp1#
也许您想检查
content
列表是否与项目中的文件夹实际匹配。考虑新的Next.js使用app
而不是pages
。所以你可能想把它改成: