react使用css module无法重写bootstrap样式问题及解决
使用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这种）。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
- React找不到模块“./index.module.scss”或其相应的类型声明及解决方法
- react 报错Module build failed: BrowserslistError: Unknown browser query `dead`问题的解决方法
- 在 React Native 中使用 CSS Modules的配置方法
- 关于React Native报Cannot initialize a parameter of type''NSArray＜id＜RCTBridgeModule＞＞错误(解决方案)
- 在Create React App中使用CSS Modules的方法示例
- 在create-react-app中使用css modules的示例代码
- 详解使用create-react-app添加css modules、sasss和antd
相关文章
这篇文章主要介绍了antd upload上传如何获取文件宽高问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
Redux Toolkit可以帮助开发者更快速、更高效地编写Redux应用,本文主要介绍了React使用Redux Toolkit的方法示例,具有一定的参考价值,感兴趣的可以了解一下2025-04-04
在构建复杂的React应用时,组件之间的通信是至关重要的,从简单的父子组件通信到跨组件状态同步,不同组件之间的通信方式多种多样,下面我们认识react组件通信的几种方式,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了Redux saga异步管理与生成器，工作中使用了redux-saga这个redux中间件，如果不明白内部原理使用起来会让人摸不着头脑，阅读源码后特意对其原理做下总结2023-02-02
React的调和算法，主要发生在render阶段，调和算法并不是一个特定的算法函数，而是指在调和过程中，为提高构建workInProcess树的性能，以及Dom树更新的性能，而采用的一种策略，又称diffing算法2021-12-12
React利用React.memo和useCallback缓存弹窗组件
本文主要介绍了React利用React.memo和useCallback缓存弹窗组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-07-07
ahooks封装cookie localStorage sessionStorage方法
这篇文章主要为大家介绍了ahooks封装cookie localStorage sessionStorage的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
React项目配置axios和反向代理和process.env环境配置等问题
这篇文章主要介绍了React项目配置axios和反向代理和process.env环境配置等问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React 高阶组件HOC使用小结，一起看看吧2022-12-12
在 Vue 中可以简单地使用 watch 来监听数据的变化，还能获取到改变前的旧值，而在 React 中是没有 watch 的，今天通过本文给大家讲解React实现Vue的watch监听属性的方法,需要的朋友可以参考下2023-06-06
最新评论