React中不同组件引入独立SCSS却样式冲突的原因及疑问咨询

组件与样式代码 #

Login.jsx #

import "../../Login.scss";
function Login() {
  return (
    <>
      <div>Login</div>
    </>
  );
}

export default Login;

Register.jsx #

import React from "react";
import "../../Register.scss";
function Register() {
  return (
    <>
      <div>Register </div>
    </>
  );
}

export default Register;

Login.scss #

div{
  background-color: red;
}

Register.scss #

div{
  background-color: aqua;
}

问题描述 #

在App.js中同时渲染Login和Register组件时，两个组件均应用了Register.scss的样式——即使Login组件并未引入该文件。现提出两个问题：

1. 造成该现象的可能原因是什么？
2. 是否可以通过不同的引入路径来区分并应用同名类的样式？

问题解答 #

1. 现象原因 #

SCSS最终会被编译为普通CSS，而CSS本身是全局作用域的。当两个组件的样式文件被打包到最终的CSS文件中时，两个div选择器会产生冲突。如果Register.scss的样式在打包后的文件中排在Login.scss之后，根据CSS的层叠优先级规则，后声明的样式会覆盖之前的，因此所有div都会显示aqua背景色。

2. 路径区分是否可行 #

不能。引入路径仅用于告诉构建工具查找样式文件的位置，最终编译后的CSS依然是全局生效的，不会因为引入路径不同而自动添加作用域隔离。无论路径如何修改，只要选择器（比如div）完全相同，就会出现样式覆盖的问题。

解决这类样式冲突的常用方案：

• 使用CSS模块化：将SCSS文件名改为Login.module.scss，通过import styles from "../../Login.module.scss"引入，组件内用className={styles.loginDiv}绑定样式，构建工具会自动为类名添加唯一哈希值，实现作用域隔离。
• 给组件元素添加唯一类名：比如给Login的div加login-container类，Register的div加register-container类，再在对应的SCSS中用类选择器定义样式，避免全局标签选择器的冲突。

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