我无法在 css 中设置任何 html/jsx 标签的样式，因为它说“h1“选择器”不是纯的”

Question

Syntax error: Selector "h1" is not pure (pure selectors must contain at least one local class or id)

  5 | }
  6 | 
> 7 | h1 {
    |              ^
  8 |   font-size: 48px;
  9 |   text-align: center

这是当我尝试设置不是 id 或类的每个选择器的样式时出现的错误，我以前从未遇到过这个问题，而且我找不到答案，我已经使用 Next.js 进行了好久了，第一次出现，不知道该怎么办。

Answer 1

Next.js 使用内置的配置css-loader，以便所有选择器都需要是纯的 - 这意味着您不能通过标签来定位元素。我认为这个设置是在 v9.0 之后的某个版本中添加的。

该主题在此处以及其 github 存储库上报告的其他一些问题中进​​行了深入讨论。AFAIK 它按预期工作，解决它的唯一方法是：

1. 接受限制并且不要使用隐式 HTML 选择器
2. 修改next.config.js以改变的行为css-loader

最后，强制限制是好的，并促使您使用更好的 CSS 实践，但事实证明，对于具有大量遗留样式表的大型项目迁移到 Next.js 来说，它是一个很大的障碍。