Next.js中SCSS模块同名类冲突问题及解决方案咨询

一、关于className={styles.left.column1}写法的有效性 #

这种写法不可行。因为SCSS Modules编译后，嵌套类会被转换为「父类名+下划线+子类名」的独立键名（比如left_column1），而不是嵌套的对象结构。styles.left是字符串类型的类名，并非包含column1属性的对象，直接链式访问会抛出Cannot read properties of string (reading 'column1')错误。

二、解决嵌套类名冲突的核心方法 #

SCSS Modules本身会自动为嵌套类添加唯一命名空间，只要SCSS写法正确，就不会出现类名重复的问题。

正确的SCSS嵌套写法示例 #

// 示例：layout.module.scss
.left {
  padding: 1rem;
  // 嵌套在.left下的column1
  .column1 {
    background-color: #f5f5f5;
    .cell1 {
      color: #333;
    }
  }
}

.right {
  padding: 1rem;
  // 嵌套在.right下的column1
  .column1 {
    background-color: #e5e5e5;
    .cell1 {
      color: #666;
    }
  }
}

编译后，Next.js会生成类似以下的唯一类名：

• .left → layout_left--abc123
• .left .column1 → layout_left_column1--def456
• .left .column1 .cell1 → layout_left_column1_cell1--ghi789
• .right → layout_right--jkl012
• .right .column1 → layout_right_column1--mno345
• .right .column1 .cell1 → layout_right_column1_cell1--pqr678

完全不会出现同名类，自然能区分左右侧的样式。

三、正确的组件类名调用方式 #

根据编译后的键名结构，需要通过「下划线拼接的键名」访问嵌套类：

1. 调用父类：

<div className={styles.left}>...</div>
<div className={styles.right}>...</div>

2. 调用嵌套的子类：

// 调用.left下的column1
<div className={styles.left_column1}>...</div>
// 调用.right下的column1
<div className={styles.right_column1}>...</div>
// 调用.left下的column1里的cell1
<div className={styles.left_column1_cell1}>...</div>

如果觉得下划线拼接的键名不够直观，也可以给嵌套类单独起更具辨识度的类名，比如：

.left {
  padding: 1rem;
  .left-column1 { // 直接用带前缀的类名
    background-color: #f5f5f5;
    .left-cell1 {
      color: #333;
    }
  }
}

.right {
  padding: 1rem;
  .right-column1 {
    background-color: #e5e5e5;
    .right-cell1 {
      color: #666;
    }
  }
}

调用时直接用styles.left_column1或styles.right_column1，逻辑更清晰。

四、避免冲突的额外注意事项 #

• 不要随意使用:global()包裹类名，这会让类名脱离SCSS Modules的命名空间，变成全局类，容易引发冲突。
• 确保Next.js项目已正确配置SCSS支持（安装sass依赖即可，Next.js会自动处理）。

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