解决react使用css module无法重写bootstrap样式的问题

react使用css module虽然能够解决样式污染,但是同时也失去了写css样式的灵活性,特别是:在.module.css文件中当子元素是非变量的静态class类(比如bootstrap), 此时使用css选择器对该子元素的样式不会起作用的

比如下面这样:

// xx组件.module.css

.className变量     .bootstrap类名(比如:Button)      {

 font-size: 20px

}

 此时这个样式是没法生效的!

 解决办法: 

第一步:安装sass-loader, style-loader, node-sass

这里需要注意node-sass跟node版本的对应关系:node-sass - npm

 react-app/react-eject创建的项目,在安装node-sass时可能存在依赖冲突,可能无法安装较新版本的node-sass, 此时有两种选择:

   a.  降低node-sass的安装版本

   b. 安装Dart-sass, Dart Sass 是 Sass 的现代实现,被广泛用于前端开发中,特别是在构建和维护复杂的样式表时,它可以提高效率和可维护性, 并且拥有更好的兼容性。

      yarn add -D sass

 第二步、在webpack.config.js配置.scss文件的匹配规则:

webpack.config.js文件的module.rules部分增加以下配置:

module:  {

  rules:  [

    ...

             { test: /\.scss$/, // 匹配SCSS文件

                    use: [

                   "style-loader",// 将样式插入到HTML中

                    "css-loader",  // 解析CSS

                    "sass-loader" // 编译SCSS

                  ],      

             },

           ]

   }

 react-app/react-eject创建的项目, 不需要做配置,因为已内置sass支持:

第三步: 讲css module的后缀从.module.css改成.module.scss, 并使用:global关键字将bootstrap样式用{}包裹起来:

.formFont { //  通过sass解决css模块选择子元素的问题

  :global { // :global关键字必须要有,否则子元素样式不会生效

    .control-label {

        font-size: 20px;

      }

  }

}

:global关键字的作用:

被:global修饰的类名,比如, :global(.myClass),它不会被sass编译为哈希字符串,而会保留原始类名 "myClass",这样就能在css模块的环境下使用全局样式(比如bootstrap这种)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/158005.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

boot分页

List<ElectricDispatchTodoPO> todoList electricDispatchTodoService.queryTodlList(vo, sysStaffVO);// 计算总记录数int total todoList.size();// 如果总记录数大于0PageInfo<ElectricDispatchTodoPO> pageInfo new PageInfo<>();if (total > 0) {…

聚观早报 | “百度世界2023”即将举办;2024款岚图梦想家上市

【聚观365】10月13日消息 “百度世界2023”即将举办 2024款岚图梦想家上市 腾势D9用户超10万 华为发布新一代GigaGreen Radio OpenAI拟进行重大更新 “百度世界2023”即将举办 “百度世界2023”将于10月17日在北京首钢园举办。届时&#xff0c;百度创始人、董事长兼首席执…

科技资讯|9月新能源汽车零售74.3万辆,充电桩迎来发展高峰

据中国乘联会发布的初步数据&#xff0c;中国 9 月份乘用车市场零售 202.8 万辆&#xff0c;同比增长 6%&#xff0c;环比增 6%。今年以来&#xff0c;我国乘用车市场累计零售 1,524 万辆&#xff0c;同比增长 2%。 乘联会预计&#xff0c;9 月份新能源车市场零售 74.3 万辆&a…

创建IDEA模板

将常用的配置文件内容、模板框架等放到IDEA的模板中保存&#xff0c;方便以后使用。以mybatis-config.xml和一个映射文件为例&#xff08;这是我自己学习SSM时用到的&#xff0c;后面学习SpringBoot时发现配置都只需要写到application.yml中就ok了&#xff0c;配置变得非常简单…

Redis的下载与安装

1.redis下载 windows版本下载地址&#xff1a;https://github.com/MSOpenTech/redis/tags 解压后 2.启动redis

TCP/IP(十三)滑动窗口

一 滑动窗口 通信双方要读懂对方的反馈信息,并进行调整 TCP滑动窗口原理终于清楚了 TCP Window Full 和 TCP Zero Window 零窗口通知与窗口探测 "特殊的场景" 1、TCP Window Full 是站在发送端角度说的特点&#xff1a; 表示发送端不能再发数据给对方,除非发送…

使用 Apache Kafka 进行发布-订阅通信中的微服务

发布-订阅消息系统在任何企业架构中都发挥着重要作用&#xff0c;因为它可以实现可靠的集成&#xff0c;而无需紧密耦合应用程序。在解耦的系统之间共享数据的能力并不是一个容易解决的问题。 考虑一家拥有多个使用不同语言和平台独立构建的应用程序的企业。它需要响应地共享数…

小程序使用uni.createAnimation只执行一次的问题

思路&#xff1a; 在页面创建的时候&#xff0c;创建一个临时动画对象调用 step() 来表示一组动画完成通过动画实例的export方法导出动画数据传递给组件的animation属性还原动画页面卸载的时候&#xff0c;清除动画数据 <template><view class"content"&g…

使用hugging face开源库accelerate进行多GPU(单机多卡)训练卡死问题

目录 问题描述及配置网上资料查找1.tqdm问题2.dataloader问题3.model(input)写法问题4.环境变量问题 我的卡死问题解决方法 问题描述及配置 在使用hugging face开源库accelerate进行多GPU训练&#xff08;单机多卡&#xff09;的时候&#xff0c;经常出现如下报错 [E Process…

设计模式_责任链

责任链模式 介绍 设计模式定义案例责任链模式问题 传给 多个可处理人 这多个处理人做成一个链表学生请假条审核 上课老师&#xff08;3天权限&#xff09; 班主任 &#xff08;5天权限&#xff09; 校长 &#xff08;30天权限&#xff09; 问题堆积在哪里解决办法进一步优…

k8s 1.28版本二进制安装

本文目录 二进制安装Kubernetes&#xff08;k8s&#xff09;v1.28.0介绍1.环境1.0.环境准备1.Linux网卡没有eth0显示ens33或者其它&#xff08;以ens33为例&#xff09;方法一&#xff1a;修改网卡配置方法二&#xff1a;重新安装机器(本文为虚拟机) 2.克隆的虚拟机&#xff0c…

ExcelBDD Python指南

在Python里面支持BDD Excel BDD Tool Specification By ExcelBDD Method This tool is to get BDD test data from an excel file, its requirement specification is below The Essential of this approach is obtaining multiple sets of test data, so when combined with…

《向量数据库指南》——宏观解读向量数据库Milvus Cloud

宏观解读向量数据库 如今,强大的机器学习模型配合 Milvus 等向量数据库的模式已经为电子商务、推荐系统、语义检索、计算机安全、制药等领域和应用场景带来变革。而对于用户而言,除了足够多的应用场景,向量数据库还需要具备更多重要的特性,包括: 可灵活扩展、支持调参:当…

微服务13-Seata的四种分布式事务模式

文章目录 XA模式实现XA模式 AT模式AT模式的脏写问题&#xff08;对同数据并发写的问题&#xff09;其他事务不获取全局锁的一个情况&#xff08;AT模式写隔离的实现&#xff09;实现AT模式 TCC模式TCC实现我们怎么样去判断是否空回滚和业务悬挂&#xff1f;业务分析 Saga模式总…

[elasticsearch]使用postman来查询数据

最近需要debug程序&#xff0c;debug的时候需要查找elasticsearch里面的数据是否正确。 第一步建立一个post请求&#xff0c;并按照图下的方式填上ur和参数&#xff1a; 发送post请求&#xff0c;url为&#xff1a; http://ip:port/index_name/_search我这里查询的是title字…

k8s使用

一、Kubernetes好处 ​ kubernetes&#xff0c;是一个全新的基于容器技术的分布式架构领先方案&#xff0c;是谷歌严格保密十几年的秘密武器----Borg系统的一个开源版本&#xff0c;于2014年9月发布第一个版本&#xff0c;2015年7月发布第一个正式版本。 ​ kubernetes的本质…

常见的作物模型有哪些?DSSAT模型、APSIM模型、WOFOST模型与PCSE模型等应用

目录 ①最新DSSAT作物模型建模方法及应用 ②基于Python语言快速批量运行DSSAT模型及交叉融合、扩展应用 ③R语言与作物模型&#xff08;以DSSAT模型为例&#xff09;融合应用 ④WOFOST模型与PCSE模型应用 ⑤基于R语言APSIM模型进阶应用与参数优化、批量模拟 ⑥遥感数据与…

网工配置命令基础总结(2)----VRRP配置

目录 1.配置VRRP主备备份 2.配置VRRP负载分担 3.配置VRRP域BFD联动实现快速切换 VRRP 虚拟路由冗余协议 VRRP&#xff08;Virtual Router Redundancy Protocol&#xff09;通过把几台路由设备联合组成一台虚拟的路由设备&#xff0c;将虚拟网关设备的 IP 地址作为用户的默认…

内部类概述

一、内部类 1.内部类概述 2.内部类的四种实现形式 1.成员内部类 public class Outer {private int age99;public static String a;//成员内部类public class Inner{private int age88;private String name; // public static String school; //jdk 16开始才支持定义静态…

基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持自定义业务表单流程(一)

原先不支持自定义业务表单的流程流转&#xff0c;因为这样对很多用户就更加方便&#xff0c;流程还是用现有的流程&#xff0c;但表单可以自己单独设计&#xff0c;满足各种不同的业务需求。 1、增加一个接口传入当前设计的流程应用类型 /*** 获取流程分类详细信息* param cod…