基于create-react-app配置CSS Modules（模块化css）


前言

本人从Vue转来学React，在习惯于通过 scoped 写模块化css的时候，感觉非常舒服，但是使用react的时候，需要自己配置了，从网上找了一些，但是感觉不太中意，所以自己总结了个方法

效果

css module 效果图

1
2
3
4
// todolist.scss
.todo_list{
    color: green;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// TodoList.jsx
import React from 'react'
import Style from './todolist.scss'
class TodoList extends React.Component {
    constructor(props) {
        super(props)
        console.log(1)
    }
    render() {
        return (
            <div className={Style.todo_list}>Hello World</div>
        )
    }
}

export default TodoList

打包生成的css格式[文件名称]__[类名]__[五位数的hash值]

代码

  1. 执行npm run eject 将配置文件展示出来（注意：这是不可逆转的）
  2. yarn add node-sass --dev
  3. 进入到/config/webpack.config.js中，查找sass-loader添加modules:{localIdentName:'[name]__[local]__[hash:5]'}
1
2
3
4
5
6
7
8
9
10
11
12
{
 test: sassRegex,
 exclude: sassModuleRegex,
 use: getStyleLoaders(
   {
     importLoaders: 3,
     sourceMap: isEnvProduction && shouldUseSourceMap,
     modules:{localIdentName:'[name]__[local]__[hash:5]'},
   },
   'sass-loader'
 ),
}
  1. 启动或者重启项目即可