在创建-反应-应用程序中使用css模块的示例代码

前言

如果我们用webpack es6从头开始开发带有react的前端应用，必然会在各种webpack配置中消耗大量的精力，所以有各种各样的脚手架，create-react-app就是其中之一。至于css模块，它通常用于react，以避免意外的样式规则相互覆盖，并实现其他功能。

配置弹出配置文件

如果直接使用create-react-app构建一个项目，所有的配置文件都会被隐藏，整个目录首先是这样的

因此，第一步是弹出所有配置文件，并在根目录下运行以下代码

这是npm运行后弹出的第一个文件目录

还有两个文件夹，脚本和配置

配置相关文件

打开配置文件夹

我们需要配置webpack.config.dev.js，如果需要打包项目进行输出，还需要配置webpack.config.prod.js，但是这两个文件的配置方式是一样的。以webpack.config.dev.js为例。

搜索css-loader并找到这段代码

如果没有配置css模块，选项中没有模块选项，只要设置它。

使用

让我们以todo项目的list组件为例，简要介绍css模块在react中的使用。这个列表组件是ul将要做的事情的列表，效果如下

吃和感觉被打破是列表组件的显示

我们先来看看怎么写css。简短的代码如下。列表{ list-style : none；左填充： 0；宽度： 255 px；}.列表li { color: # 333背景： rgba(255，255，255，0.5)；padding: 15px边距-bottom : 15px；border-radius : 5px；cursor:指针；}文件名是TodoItem.css

Jsx文件如下

从“React”导入React；从“”导入样式。/ToTooiTem . CSS '；类TodoItem扩展了React。组件{构造器(道具){ super(道具)；this . handlechange=this . handlechange . bind(this)；} handleChange(e){ this . props . on delete(e . target . GetAttribute(' name '))；} render(){让ToDoentries=this . props . entries；返回(！-参考样式-ul类名={ styles。list } { todo entries . map((item)={ return(Li键={item.key} onclick={this。handlechange}名称={item.key} {item.text}/Li)})/。这样，我们在控制台中查看

相关的类名被编译成一个散列字符串，不同文件中引入的散列字符串是不一样的

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。