用create-react-app创建的react项目，如何模块化（module）引用css等样式文件？

我们知道，react可以直接引用css样式文件，如下：

//此为index.css的内容
.container {
  background: red;
}

//此为index.js的内容，已省略其他不重要的代码
import './index.css';

<div className='container'></div>

这样引用有一个问题，如果有多个css文件中有.container，后引入的就会覆盖前面引入的，导致样式不可控。

因此react提供了一种模块化引用css样式文件的办法，只需把样式文件以.module.css作为后缀即可，如下：

import styles from './index.module.css';

<div className={styles.container}'></div>

如果使用的是scss（点我学习如何在react项目中使用scss），也可以用此方法，如下：

import styles from './index.module.scss';

<div className={styles.container}'></div>