在 Create React App 中使用 CSS Modules

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

前提条件

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

先使用 create-react-app 命令下载一个脚手架工程，安装命令：

# 使用 npx
$ npx create-react-app my-app

# 使用 npm 
$ npm init npx create-react-app my-app

# 使用 yarn
$ yarn create react-app my-app

运行项目

$ cd my-app

# 使用 npm
$ npm start

# 或者使用yarn
# yarn start

在浏览器中输入 http://localhost:3000 查看项目效果

---

使用 CSS Module 的第一种方式

create-react-app 中内置了使用 CSS Modules 的配置，当前方式就是使用 create-react-app 内置的用法

方式

将所有的 .css/.lee/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等。即可使用 CSS Modules 的方式进行引入使用了。

用法

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

.error {
   
    background-color: red;
}

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

.error {
   
    <