所以我正在将一个应用程序从 CRA 迁移到 NextJS，并且我遇到了一些组件和页面的 .module.scss 文件的错误：
Syntax error: Selector ":global(.label-primary)" is not pure (pure selectors must contain at least one local class or id)
我收到所有 :global 和 :local css-module 选择器的错误。根据我的搜索，我可以通过将选择器包装在一个类中并编辑 jsx 来解决这个问题。但这不会破坏它的目的吗？这在应用程序的 CRA 版本而不是 NextJS 上是如何工作的？
编辑：我对此的一个解决方案是将 :global() 选择器移动到在 _app.js 中导入的全局 css 文件，但我的问题是有什么方法可以让这些样式像正确一样可用现在（ :global(...) ）？
不，除了覆盖 webpack 配置本身之外，目前还没有任何解决方案。它在 CRA 中工作，因为他们可能有mode: local，而 Next.js 有pure.
我还没有尝试覆盖css-loaderwebpack 配置，所以我只是建议一个解决方法。由于您使用的是 SCSS，因此您可以像这样包装伪全局 [1]样式：
.root :global {
.foo {
color: red;
}
}
现在将您的组件/页面包装在 a 中div，并将类设置styles.root为该元素。然后，您可以直接在所有子元素上设置className="foo".
import styles from "../styles/index.module.scss";
const IndexPage = () => (
<div className={styles.root}>
<div className="foo">This text should be red!</div>
</div>
);
export default IndexPage;
请注意，您需要在此方法之后考虑有关特异性的问题，这也不能直接与动画一起使用，您需要将它们分开keyframes，然后使它们全局化。
[1]：此方法不会使样式真正全局化，因为样式仍处于范围内。foo只有当某个父母有styles.root作为class时，class才会工作。仅当您不打算使用您的:global(.selector)from 其他组件，并且仅仅因为您想使用 JS 操作类名而不使用样式对象而使用它们时，这才是可取的。
如果您希望这些是真正全局的，请添加styles.root到这样document.documentElement的useEffect钩子中：
import { useEffect } from "react";
import styles from "../styles/index.module.scss";
const IndexPage = () => {
useEffect(() => {
document.documentElement.classList.add(styles.root);
return () => {
document.documentElement.classList.remove(styles.root);
};
}, []);
return (
<div className="foo">
This text should be red, even if you put it in another component until the
page is same. If you want it across pages inject it in _app or _document.
</div>
);
};
export default IndexPage;
PS：注射类html的_app或者_document是不作为使用完全相同全球的样式表，因为它可能发生，你必须多页应用，那么只有在特定页面上的组件的CSS会因为自动CSS代码分裂的请求由 Next.js 完成。如果情况并非如此，并且您的所有页面都共享相同的 CSS，那么没有必要使事情复杂化，只需使用_app.