求助：Next.js中Sass模块样式无法应用于Header元素

针对你遇到的Next.js项目中Login.module.scss样式未生效的问题，可按以下步骤排查：

1. 验证Sass依赖是否安装 #

Next.js不会默认内置Sass处理能力，需要手动安装依赖：

npm install sass
# 或
yarn add sass

安装完成后重启开发服务器，确保Next.js能正确解析SCSS文件。

2. 检查文件导入路径是否正确 #

确认@/styles/Login.module.scss的路径与实际文件位置匹配：

• Next.js中@默认指向src目录，如果你的styles文件夹在项目根目录而非src下，需调整导入路径，比如组件在pages目录时，路径应为：

  import styles from "../styles/Login.module.scss"
  

3. 确认CSS Modules类名映射是否正确 #

CSS Modules会将短横线命名的类名转为驼峰式，你也可以直接使用原始类名（通过方括号语法），两种写法都可尝试测试：

// 写法一：驼峰映射
<header className={styles.navLogin}>
// 写法二：原始类名
<header className={styles["nav-login"]}>

同时检查SCSS文件中的类名是否与组件引用完全对应（注意大小写、短横线格式）。

4. 排查全局样式覆盖问题 #

打开浏览器开发者工具，查看<header>及子元素的样式面板：

• 检查是否有全局CSS（如globals.css）中的规则优先级更高，覆盖了模块样式。
• 若存在覆盖，可临时在模块样式中增加!important测试（不推荐长期使用），或调整选择器优先级：

  .nav-login {
    background-color: white;
    height: 5vh;
  
    & nav ul li a {
      color: #FA5858 !important;
      text-decoration: none;
    }
  }
  

5. 验证类名是否正确渲染 #

在浏览器开发者工具中查看<header>元素的class属性，正常情况下会生成类似Login_navLogin__xxxx的唯一类名：

• 如果没有生成该类名，说明样式文件未正确导入，需重新检查导入语句和文件路径。

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