如何避免React中SASS文件被全局导入？

你的问题根源在于CSS Modules默认只对类选择器进行局部化处理，而你在Home.module.sass里用了#container这类ID选择器，这类选择器不会被CSS Modules添加哈希后缀，会保持全局生效，所以即使Panel.tsx没导入这个文件，这些样式也会影响到全局元素。

给你两个直接有效的解决方案：

方案一：替换ID选择器为类选择器（推荐） #

把Home.module.sass里的ID选择器全部改成类选择器，这样CSS Modules会自动给类名添加唯一哈希，变成局部样式：

修改后的Home.module.sass：

.container
    width: 100%
    height: 100vh
    display: block
    overflow: auto

.container > div
    width: 50%
    float: left
    height: 100%
    display: flex
    padding: 0 50px
    align-items: center
    box-sizing: border-box
    flex-direction: column
    justify-content: center

.title
    // 你的title样式代码

在Home.tsx中对应使用：

<div className={styles.container}>
    {/* 内部子元素 */}
    <span className={styles.title}>Welcome {user.name}</span>
</div>

方案二：用:local()包裹ID选择器（保留ID的场景） #

如果一定要保留ID选择器，需要用:local()语法强制CSS Modules对其进行局部化处理：

修改后的Home.module.sass：

:local(#container)
    width: 100%
    height: 100vh
    display: block
    overflow: auto

:local(#container) > div
    width: 50%
    float: left
    height: 100%
    display: flex
    padding: 0 50px
    align-items: center
    box-sizing: border-box
    flex-direction: column
    justify-content: center

在Home.tsx中通过styles对象获取处理后的ID名：

<div id={styles.container}>
    {/* 内部子元素 */}
</div>

额外检查 #

最后确认下项目的入口文件（比如Next.js的_app.tsx）或者其他全局配置文件里，有没有不小心全局导入了Home.module.sass，这也会导致样式全局生效。

内容的提问来源于stack exchange，提问作者O'Niel