create-react-app下css模块化的配置

起因是我前段时间开始学习react，看了其他人的代码，发现他的各个组件的css全部都写在一个css文件下面。

其实如果样式非要跟组件在一起，也不是不行，就是把样式写在组件的js里，这就是react-native的写法。

但是呢，我觉得这样怪怪的，如果样式很多呢，那岂不是特别混杂？
说白了我就是不想这么写！！！

---

写过vue-cli构建的vue项目的同学，应该有印象：每个组件的样式是直接与vue文件在一起的，我觉得十分利于管理，那么react是不是也有呢？

当然了！

我看到webpack3的文档这种是有这么一说的：

webpack.config.js

    {
  test: /\.css$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        modules: true,//开启css 模块化
        localIdentName: '[path][name]__[local]--[hash:base64:5]'//配置生成的标识符(ident)
      }
    }
  ]
}

这样就好了。
比如：

在index.js文件中引入bar.less

import styles from './bar.less'

效果：

其实这个就相当于vue style标签里的scope属性。