create-react-app中css module无效的解决办法

Posted 2023-03-09

参考技术A 转自： https://blog.csdn.net/zgd826237710/article/details/86478748

本文介绍了如何在 Create React App 脚手架中使用 CSS Modules 的两种方式

编写一个 css 文件：Button.module.css

编写一个普通的 css 文件：another-stylesheet.css

在 js 文件中使用 CSS Modules 的方式进行引用：Button.js

此时 Button 组件的背景颜色是红色，但是字体颜色却不是红色，因为使用了 Css Modules 之后，普通的 css 样式就不起效果了，需要用全局的方式编写才可以(:global)。

使用命令：

运行完成之后，打开 config 目录下的 webpack.config.js 文件，找到 test: cssRegex 这一行，在 use 属性执行的方法中添加 modules: true，如下：

该方法同样需要引入，只是名字不需要是.module.css了。