基于create-react-app配置CSS Modules(模块化css)

·  阅读 1729

前言

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

效果

css module 效果图

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

代码

  1. 执行npm run eject 将配置文件展示出来(注意:这是不可逆转的)
  2. yarn add node-sass --dev
  3. 进入到/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'
 ),
}
复制代码
  1. 启动或者重启项目即可
分类:
前端
标签:
分类:
前端
标签: