在 Create React App 中使用 CSS Modules

最新推荐文章于 2023-08-22 11:43:19 发布

浮沉半生

最新推荐文章于 2023-08-22 11:43:19 发布

阅读量2.3k

点赞数 1

分类专栏： React 前端开发文章标签： React create-react-app CSS Modules

本文链接：https://blog.csdn.net/zgd826237710/article/details/86478748

版权

本文详细介绍了如何在 Create React App 中使用 CSS Modules，包括两种不同的实现方式。首先，通过创建并运行 create-react-app 项目作为前提。接着，展示了两种启用 CSS Modules 的方法：一种是通过添加 .module.css 扩展名来自动启用，另一种是手动修改 webpack 配置。每种方式都配合具体代码示例说明了如何引用 CSS Modules，并强调了普通 CSS 样式在 CSS Modules 模式下不会生效，需要使用全局选择器 (:global)。文章最后提醒读者，若要启用 Sass 或 Less，需额外配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

本文介绍了如何在 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 {
   
    <

最低0.47元/天解锁文章