React项目中使用 CSS Module

阳光穿透心脏的1/2处 2021-08-30 22:48 401阅读 0赞

#### 安装react-app-rewired ####

由于新的 react-app-rewired@2.x 版本的关系，还需要安装 customize-cra。但是我们这里不需要安装 react-app-rewired@2.x。只需要安装 react-app-rewired@2.0.2-next.0这个版本就可以了。

yarn add react-app-rewired@2.0.2-next.0 --save-dev //这个版本比较稳定

#### 修改package.json ####

/* package.json */
    "scripts": { 
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test --env=jsdom",
    }

#### 安装css-modules包 ####

//scss版本
    yarn add --dev react-app-rewire-css-modules sass-loader sass 
    //less版本
    yarn add --dev react-app-rewire-less-modules

#### 根目录创建config-overrides.js并编辑以下代码 ####

/*config-overrides.js */
    const {  injectBabelPlugin } = require('react-app-rewired');
    const rewireCssModules = require('react-app-rewire-css-modules');
    
    module.exports = function override(config, env) { 
        //css模块化
        config = rewireCssModules(config, env);
        return config;
    };

#### css文件后缀需要加上特殊写法 ####

*.module.css
    *.module.less
    *.module.scss

--------------------

> 作者：**Vam的金豆之路**
> 
> 主要领域：**前端开发**
> 
> 我的微信：**maomin9761**
> 
> 微信公众号：**前端历劫之路**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70][]

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210813/2e7dd2dac72c456cba2716ed11483046.png

发表评论取消回复

表情：

评论列表（有 0 条评论，401人围观）

还没有评论，来说两句吧...

相关阅读

相关 react项目中的css模块化

1. 创建xx.module.css .box\{ width:100px; height:100px; border:1px solid \ccc; \} 2.

矫情吗；*/ 2023年07月17日 14:12/ 0 赞/ 3 阅读

相关在react项目中使用less

在react项目中使用less 1. 安装依赖包：cnpm i --save-dev less less-loader （less 、less-loader两个包） 2

迷南。/ 2023年06月12日 09:27/ 0 赞/ 65 阅读

相关在Vue项目中使用React组件，在React项目中使用Vue组件

开发中遇到一个需求：在Vue项目中使用已经开发好的React组件。这里选择了使用vuera库来完成需求。下面记录一下使用的步骤（在Reat项目中使用Vue组件与此步骤类似）。

短命女/ 2022年10月12日 05:59/ 0 赞/ 627 阅读

相关 React 项目中使用Echarts

直接上代码吧： react 项目中添加Echarts 相关模块 npm install echarts --save 代码： import React

朴灿烈づ我的快乐病毒、/ 2022年09月12日 06:55/ 0 赞/ 232 阅读

相关 CSS Modules使用方法

css模块化解决方案抛弃css (Radium,jsxstyle,react-style) 利用js来管理样式依赖(css Modules) css模块

矫情吗；*/ 2022年04月17日 02:42/ 0 赞/ 135 阅读

相关 React 项目记录（四）——在 React 中使用地图

Step 1：申请APK 首先，要到百度地图APK官网 [http://lbsyun.baidu.com/][http_lbsyun.baidu.com] 申请 APK。

电玩女神/ 2022年03月25日 12:06/ 0 赞/ 519 阅读

相关 React 项目记录（三）——在 React 中使用 antd

Step 1：安装antd npm i --save antd Step 2：引入文件在需要使用到 antd 的页面顶部加上 import {

川长思鸟来/ 2022年03月25日 10:16/ 0 赞/ 339 阅读

相关 react中antd+css Module一起使用

antd 和 css modules 不能混用,针对antd的css 单独写一条loader的规则,不开启 css modules。使用 exclude 和 inclu

冷不防/ 2021年12月21日 04:13/ 0 赞/ 271 阅读

相关 react-css-modules

在开发 react 项目中，有些项目需要设置大量的样式文件，如果通过定义样式常量，纯嵌入的方式编写样式，这将会大大的降低效率。stylus + react-css-module

蔚落/ 2021年09月17日 08:20/ 0 赞/ 196 阅读

相关 React项目中使用 CSS Module

安装react-app-rewired 由于新的 react-app-rewired@2.x 版本的关系，还需要安装 customize-cra。但是我们这里不需要安装

阳光穿透心脏的1/2处/ 2021年08月30日 22:48/ 0 赞/ 402 阅读