react 项目 css模块化 ( babel-plugin-react-css-module )

使用 create-react-app 初始化的项目所有的 css 文件默认是全局加载的，想要样式不冲突处理起来会有点麻烦，为了解决这个问题可以在 webpack 的配置使用 babel-plugin-react-css-module

webpack配置文件暴露

npm run eject

项目默认不显示webpack的配置文件，在命令行工具里执行上述命令可以将webpack.config.js文件暴露出来。运行改命令后会在项目目录里增加一个config的文件夹

npm run eject的时候报错 This git repository has untracked files or uncommitted changes:

解决办法

git add .

git commit -m 'commit remark'

安装

npm install babel-plugin-react-css-modules --save

配置

webpack.config.js
将下面的配置代码添加到 module.rules[ {oneOf[//要添加的配置代码]} ]
具体的webpack配置写法根据webpack的版本可以参考官网文档.

{
   
  test: /\.css$/,
  use: [
    'style-loader',
    {
   
      loader