create-react-app支持CSS Modules

  我们已经快速搭建一个支持TypeScript + SCSS的React项目，为了避免class命名冲突，现在我们想要支持css模块化开发。

  我们已经释放了webpack.config.js，可以看出，create-react-app已经为配置好了css module，但是需要我们以.module.scss / .module.css命名。

  CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。css-loader插件会生成一个独一无二的class的名字，不会与其他选择器重名，从而产生局部作用域的效果，这就是CSS Modules 的做法。

我们写两个组件HELLO、WORLD

HELLO/index.module.scss

.class1 {
  color: red;
}

HELLO/index.tsx

import React, {Component} from 'react'
import Hello from  './index.module.scss'

class ManageIndex extends Component{
    render(){
        return (
            <div>
                <p className={Hello.class1}>hello</p>
            </div>
        )
    }
}
export default ManageIndex;

WORLD/index.module.scss

.class1 {
  color: blue;
}

WORLD/index.ts

import React, {Component} from 'react'
import World from './index.module.scss'

class ManageIndex extends Component{
    render(){
        return (
            <div>
                <p className={World.class1}>world</p>
            </div>
        )
    }
}
export default ManageIndex;

  可以看到生成的类名变成独一无二的，不影响其他组件。