Next.js中CSS Modules定位纯元素报错的解决办法咨询

这个报错是Next.js集成的CSS Modules在严格模式下的限制——它要求所有样式选择器必须包含至少一个本地类/ID，目的是避免不小心污染全局样式。针对你的代码，有两种靠谱的解决方式：

方案一：给ul添加本地类（推荐） #

这是最符合CSS Modules设计理念的做法，把ul的样式变成局部作用域，不会影响其他组件里的ul：

修改你的index.js：

<div className={styles.container}> 
  <ul className={styles.list}> {/* 新增本地类 */}
    <li>Person One</li> 
  </ul> 
</div>

对应的index.module.css：

.container{ 
  background-color: pink; 
} 
.list{ /* 用本地类选择器替代全局ul */
  list-style-type: none; 
}

方案二：用:global()包裹全局选择器 #

如果你确实需要给全局的ul设置样式（或者只想给当前组件内的ul用全局选择器），可以用:global()语法告诉CSS Modules不要处理这个选择器：

方式1：全局生效的ul样式 #

.container{ 
  background-color: pink; 
} 
:global(ul){ /* 包裹后变成全局选择器 */
  list-style-type: none; 
}

⚠️ 注意：这种方式会影响整个项目里的所有ul，除非你确定要全局修改，否则不推荐。

方式2：仅当前组件内的ul生效（更安全） #

如果只想让.container下的ul生效，可以结合局部类和全局选择器：

.container :global(ul){ 
  list-style-type: none; 
}

这样只会影响当前组件里.container包裹的ul，不会污染全局。

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