我正在尝试使用 PurgeCSS 从我的 NextJS 项目中删除未使用的 css。然而,我很难将 PurgeCSS 最基本的集成到我的项目中来工作。
我正在使用这个文档:https://www.purgecss.com/guides/next 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;}
尝试按照此页面自定义 PostCSS(忽略 tailwindcss):https://nextjs.org/learn/basics/assets-metadata-css/styling-tips https://nextjs.org/learn/basics/assets-metadata-css/styling-tips
稍微简化一下,安装@fullhuman/postcss-purgecss
and 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'
]
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)