react中使用css module

原因：react中的css没有域的概念，是全局的，在Vue的工程中除了Modules之外还可以使用css作用域scoped来做实现组件之间的样式不会互相干扰，实现样式独立，所以需要css modules。

有很多方法可以解决这个问题，比如 css-in-js:

本文只讨论css modules的实现方式。

如果是create-react-app 来创建的项目：

1.npm run eject （显示设置文件，会看到script/ 与 config/文件夹）

如果出现：Remove untracked files, stash or commit any changes, and try again.

把git 提交一下就好了 git add .     git push   再执行就ok了

2、在config/目录下可以看到两个配置文件webpack.config.js和webpackDevServer.config.js。如果你需要配置所需的功能，可以在webpack.config.js中添加配置。如果你需要将项目打包输出的话，还得配置webpack.config.prod.js。具体如何配置，这里不说了。因为太复杂了。

先说明一下 Create React APP默认具备了CSS Modules的功能

，

这里就不探究了，

直接使用css  module，起名字的时候要加上module。引入的时候要用对象的方式使用就行了