如何在next-js中默认css模块中的":global"

Question

我在Next.js项目中使用CSS模块。假设我有这样的代码：

// foo.module.(s)css
.foo :global {
animation-name: bounce;
// ...
}

我可以在Next.js中修改Webpack配置吗？这样我就不需要在每个选择器上指定:global，这样animation-name的值就不会被散列了？在这种情况下，我希望对foo进行散列，但不希望对bounce进行散列。

我的所有关键帧都在全局样式表文件中定义。我不想确定关键帧的范围，因为我多次使用它们，在这种情况下，确定范围就是生成重复的关键帧(只是有不同的名称(。

如有任何帮助或建议，我们将不胜感激！

Answer 1

我选择的解决方案是使用带有:global运算符的CSS模块来防止散列名称。这使得可以使用Lexical RTE管理的HTML中的名称。

导入的styles.module将成为包装器的类名。然后可以在HTML中引用CSS类选择器。

/* Editor styles mapped to the class names in the HTML. */
.module :global .bold {
font-size: 0.85em;
font-weight: 600;
}
.module :global .underline {
text-decoration: underline;
}
.module :global .italic {
font-style: italic;
}