React中如何使用SCSS Modules？是否支持style.module.scss样式文件？

React项目完全支持style.module.scss格式的CSS Modules样式文件，使用逻辑和style.module.css完全一致，仅需要额外安装Sass相关编译依赖即可。

不同项目场景的依赖安装方式 #

1. 使用Create React App（CRA）搭建的项目 #

CRA内置了对Sass CSS Modules的支持，只需要安装sass包即可：

• npm用户执行命令：npm install sass --save-dev
• yarn用户执行命令：yarn add sass --dev
• pnpm用户执行命令：pnpm add sass -D

安装完成后直接创建xxx.module.scss文件，按照原来.module.css的导入方式使用即可，示例：

import styles from './style.module.scss'

function Demo() {
  return <div className={styles.container}>测试内容</div>
}

2. 自行配置webpack搭建的React项目 #

除了安装sass本身之外，还需要安装对应的loader来处理scss文件：

• 依赖安装命令（npm示例）：npm install sass sass-loader css-loader style-loader --save-dev
• 然后需要在webpack配置文件的module.rules中添加scss文件的处理规则，示例配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true // 开启CSS Modules能力
            }
          },
          'sass-loader'
        ]
      }
    ]
  }
}

注意：目前主流的React框架（比如Next.js、Vite搭建的React项目）也都默认支持.module.scss格式的CSS Modules，都只需要安装sass依赖即可直接使用，不需要额外修改配置。

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