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

2020-05-26 2,978 阅读1分钟

前言

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

效果

// todolist.scss
.todo_list{
    color: green;
}

// 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值]

代码

执行npm run eject 将配置文件展示出来（注意：这是不可逆转的）
yarn add node-sass --dev
进入到/config/webpack.config.js中，查找sass-loader添加modules:{localIdentName:'[name]__[local]__[hash:5]'}

{
 test: sassRegex,
 exclude: sassModuleRegex,
 use: getStyleLoaders(
   {
     importLoaders: 3,
     sourceMap: isEnvProduction && shouldUseSourceMap,
     modules:{localIdentName:'[name]__[local]__[hash:5]'},
   },
   'sass-loader'
 ),
}

启动或者重启项目即可