在创建反应应用程序中使用CSS模块的方法示例

先决条件

请先全局安装create-react-app插件，安装命令：npm安装create-react-app -g

使用create-react-app命令下载脚手架项目，并安装命令：

#使用npx$ npx创建-反应-app my-app#使用NPM $ NPM init npx创建-反应-appmy-app #使用纱$纱创建反应-app my-app运行项目

$ cd my-app#使用npm$ npm start#或使用纱#纱start在浏览器中输入http://localhost:3000查看项目效果

使用CSS模块的第一种方法

Create-react-app有使用CSS Modules的内置配置，目前的方式是使用create-react-app的内置用法

方式

修改所有样式文件，例如。css/。李/。scss到. module . CSS/. module . less/. module . scss。你可以使用CSS模块进行介绍。

使用

写一个css文件。错误{ background-color : red；}编写一个普通的css文件：other-样式表. css。错误{ color: red}在js文件中使用CSS Modules进行引用：Button.js

从“反应”导入反应{组件}；从“”导入样式。/button . module . CSS '；//导入。/other-样式表. css '通过CSS模块；//一般介绍类button扩展组件{ render(){//引用为js对象返回button类名={styles。错误} error button/button；}}在浏览器中查看效果

此时Button组件的背景色是红色的，但是字体颜色不是红色的，因为使用Css Modules后，普通的Css样式已经没有效果了，需要用全局的方式来写(:global)。最终添加到元素中的样式的结果是：button class=' button _ error _ ax7yz ' error button/button

使用CSS模块的第二种方法

方式

在命令行上运行npm运行弹出命令

这个命令将显示脚手架中所有隐藏的配置，并且这个过程是不可逆的

运行后，在config目录下打开webpack.config.js文件，找到test: cssRegex行

向use属性执行的方法中添加module:true，如下图所示：

使用

与第一种方法相同，只是不需要添加。css文件后的模块后缀。

写一个css文件。错误{ background-color : red；}编写另一个常见的css文件：other-样式表. css。错误{ color: red}在js文件中使用CSS Modules进行引用：Button.js

从“反应”导入反应{组件}；从“”导入样式。/button . CSS '；//导入。/other-样式表. css '可以直接使用CSS Modules引入；//一般介绍类button扩展组件{ render(){//引用为js对象返回button类名={styles。错误} error button/button；}}在浏览器中查看效果

此时Button组件的背景色是红色的，但是字体颜色不是红色的，因为使用Css Modules后，普通的Css样式已经没有效果了，需要用全局的方式来写(:global)。最终添加到元素中的样式的结果是：button class=' button _ error _ ax7yz ' error button/button

如果您想使用第二种方法来引用sass和更少的CSS模块，您可以将modules: true添加到sass和更少的解析配置中。

注意

默认的create-react-app支架不能直接使用sass和less编写css，需要先配置。

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