Next.js CSS模块中BEM双下划线写法引发语法错误求助

错误原因 #

你在CSS模块里用了Sass的嵌套选择器语法（&__logo），但Next.js默认的CSS模块只支持标准CSS，不识别这种Sass语法，所以抛出了"Selector is not pure"的错误。

两种解决办法 #

方法一：改用标准CSS写法（无需额外依赖） #

直接在CSS模块里写出完整的BEM类名，不用嵌套：

/* Header.module.css */
.header {
  height: 100%;
}

.header__logo {
  height: 100px;
}

JS文件里的代码保持不变，依然使用style.header和style.header__logo即可正常运行。

方法二：启用Sass支持（保留嵌套语法） #

如果想继续用Sass的嵌套写法，需要安装Sass依赖并修改文件后缀：

1. 安装Sass：在项目根目录执行命令

npm install sass
# 或者用yarn
yarn add sass

2. 把Header.module.css重命名为Header.module.scss
3. 修改JS文件里的导入路径：

import styles from './Header.module.scss'

4. 原来的Sass嵌套写法可以保留，编译时会自动转换成标准CSS类名，错误就会消失。

内容的提问来源于stack exchange，提问作者Shanthi B