简体   繁体   中英

I can't style any html/jsx tag in css, because it says 'h1 "selector" is not pure'

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

this is the error that I get when I try to style every selector that is not an id or a class, I've never got this problem before, and I can't find an answer, I've used Next.js for a long time, but that's the first time it appears, idk what to do.

Next.js is utlising built-in css-loader that is configured so that all the selectors require to be pure - which means that you can not target elements by their tag. I think that this setting has been added in one of the releases after v9.0.

The topic is discussed in-depth here and in some other issues reported on their github repo. AFAIK it's working as intended and the only way to go around it is:

  1. Accept the limitation and don't use implicit HTML selectors
  2. Modify next.config.js to change the behaviour of css-loader

In the end the enforced limitation is good and pushes you to use better CSS practices, however it proves to be a big obstacle for bigger projects with lots of legacy stylesheets to migrate into Next.js.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM