如何在Next.js和module.scss文件中使用PurgeCSS？

Question

4

我有一些组件级别的 .scss 文件（文件名.module.scss），想要从这些文件中清除未使用的 css。

由于样式类名称被哈希，我想知道如何让 purgeCSS 在使用 module.scss 文件进行大部分样式设置的 next.js 应用程序中工作。

这个问题在这里有讨论：https://github.com/FullHuman/purgecss/issues/163#issuecomment-526607181，但是它是针对 react 应用程序的。

- TigerCode

1

你尝试过官方文档中的内容了吗：https://purgecss.com/guides/next.html#next-js？你的PostCSS配置文件是什么样子的？ - juliomalves

@juliomalves 我试过了，但问题是我的模块样式被删除了。我为每个组件/页面文件都有fileName.module.scss文件，但它们都消失了。 - TigerCode

我的一些需要额外CSS的包似乎也被全部删除了它们的CSS。 - TigerCode

编辑：看起来现在（模块）使用了你发送给我的链接中的配置，但是一些库样式丢失了（react-multi-carousel有导入“react-multi-carousel/lib/styles.css”; 在_app.js中导入）。 - TigerCode

我尝试在 postcss.config.js 中将它们的类名添加到白名单中： safelist: ["html", "body", /^react-/, /^navbar-/]但这似乎没有起作用。 - TigerCode

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- wscourge · Answer 1

您可以使用专门为此目的制作的 NPM 包 next-purge-css-modules：

npm install next-purge-css-modules

在你的next.config.js中使用：

const withPurgeCSSModules = require('next-purge-css-modules');
const nextConfig = { ... };

module.exports = withPurgeCSSModules(nextConfig);