我们知道，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>
网友评论