React中style.scss导入index.module.scss后样式不生效，求解决方法

你用了CSS Modules，当在index.module.scss里导入style.scss时，导入的样式会被当作模块化内容处理，类名会被编译成带唯一哈希值的名称（比如变成bg_xxxx），但你JSX里写的className='bg'是原始类名，和编译后的类名不匹配，所以样式不生效。

办法一：把style.scss作为全局样式使用 #

如果不想让style.scss的类名被模块化处理，有两种方式：

方式1：直接在JS文件里全局导入 #

修改index.js，新增全局导入语句：

import React from 'react';
import ReactDOM from 'react-dom/client';
import styles from './index.module.scss';
import './style.scss'; // 全局导入style.scss

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <div className={styles.color}>test
      <div className='bg'>inside</div>
    </div>
  </React.StrictMode>
);

方式2：在模块化SCSS里用:global包裹导入内容 #

修改index.module.scss，将导入语句放在:global块内：

.color{
    background-color: red;
    color: white;
}
:global {
  @import "style.scss";
}

这样bg类名会保持全局状态，JSX里的className='bg'就能正常匹配样式。

办法二：将style.scss的类名作为模块化类名引用 #

如果想让style.scss也遵循CSS Modules规则，直接修改JSX里的类名引用方式：

import React from 'react';
import ReactDOM from 'react-dom/client';
import styles from './index.module.scss';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <div className={styles.color}>test
      <div className={styles.bg}>inside</div> {/* 使用styles.bg引用模块化后的类名 */}
    </div>
  </React.StrictMode>
);

此时style.scss里的.bg会被编译成带哈希的类名，和styles.bg对应，样式就能正常生效。

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