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

Posted 2023-02-22

【中文标题】我无法在 css 中设置任何 html/jsx 标记的样式，因为它说\'h1“选择器”不是纯的\'

【英文标题】：I can't style any html/jsx tag in css, because it says 'h1 "selector" is not pure'我无法在 css 中设置任何 html/jsx 标记的样式，因为它说'h1“选择器”不是纯的'

【发布时间】：2020-11-18 08:20:44

【问题描述】：

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很久了，第一次出现，不知道怎么办。

【问题讨论】：

看起来 h1 嵌套在另一个元素的声明中，这意味着您可能在某处缺少“”

【参考方案1】：

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

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

接受限制，不要使用隐式 html 选择器 修改next.config.js以改变css-loader的行为

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

【讨论】：

未按预期工作，this has been fixed in next@9.5.4-canary.8