html - 我无法在 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 之后的其中一个版本中。

主题讨论深入here以及在他们的 github repo 上报告的其他一些问题。 AFAIK 它按预期工作，唯一的解决方法是:

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

最后，强制限制是好的，它会促使您使用更好的 CSS 实践，但它被证明是将具有大量遗留样式表的大型元素迁移到 Next.js 的一大障碍。