用create-react-app创建的react项目,如何模块化(module)引用css等样式文件?

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

//此为index.css的内容
.container {
  background: red;
}
//此为index.js的内容,已省略其他不重要的代码
import './index.css';

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

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

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

如果使用的是scss(点我学习如何在react项目中使用scss),也可以用此方法,如下:

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

你可能感兴趣的:(用create-react-app创建的react项目,如何模块化(module)引用css等样式文件?)