Double underscore '__' in BEM of NextJS Css module throw error

Question

I'm new to Nextjs and BEM naming convention, i have nextjs project where i'm using BEM,

in Header.js

<div className={style.header}>
  <div className={style.header__logo}>Logo</div>
</div>

in Header.module.css

.header{
   height:100%;
   &__logo {
     height:100px;
   }
 }

when i run i'm getting

Syntax error: Selector "&__logo" is not pure (pure selectors must contain at least one local class or id), can anyone please help me to resolve the issue

Answer 1

You should add the sass package to you're project and rename your *.css files to *.scss as stated in the Next.js documentation.