react使用css module無法重寫bootstrap樣式問題及解決

更新時間：2023年11月14日 14:39:47 作者：kingtopest

這篇文章主要介紹了react使用css module無法重寫bootstrap樣式問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

使用css module無法重寫bootstrap樣式問題

react使用css module雖然能夠解決樣式污染，但是同時也失去了寫css樣式的靈活性，特別是：

在.module.css文件中當(dāng)子元素是非變量的靜態(tài)class類（比如bootstrap）, 此時使用css選擇器對該子元素的樣式不會起作用的

比如下面這樣：

// xx組件.module.css
.className變量     .bootstrap類名（比如：Button）      {
 font-size:　20px
}

此時這個樣式是沒法生效的！

解決辦法

第一步：安裝sass-loader, style-loader, node-sass

這里需要注意node-sass跟node版本的對應(yīng)關(guān)系：node-sass - npm

react-app/react-eject創(chuàng)建的項目，在安裝node-sass時可能存在依賴沖突，可能無法安裝較新版本的node-sass, 此時有兩種選擇：

a. 降低node-sass的安裝版本
b. 安裝Dart-sass, Dart Sass 是 Sass 的現(xiàn)代實現(xiàn)，被廣泛用于前端開發(fā)中，特別是在構(gòu)建和維護復(fù)雜的樣式表時，它可以提高效率和可維護性, 并且擁有更好的兼容性。

 yarn add -D sass

第二步、在webpack.config.js配置.scss文件的匹配規(guī)則：

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

module:  {
  rules:  [
    ...
             { test: /\.scss$/, // 匹配SCSS文件
                    use: [
                   "style-loader",// 將樣式插入到HTML中
                    "css-loader",  // 解析CSS
                    "sass-loader" // 編譯SCSS
                  ],      
             },
           ]
   }

react-app/react-eject創(chuàng)建的項目, 不需要做配置，因為已內(nèi)置sass支持：

第三步：講css module的后綴從.module.css改成.module.scss, 并使用:global關(guān)鍵字將bootstrap樣式用{}包裹起來：

.formFont { //  通過sass解決css模塊選擇子元素的問題
  :global { // :global關(guān)鍵字必須要有，否則子元素樣式不會生效
    .control-label {
        font-size: 20px;
      }
  }
}

:global關(guān)鍵字的作用：

被:global修飾的類名，比如， :global(.myClass)，它不會被sass編譯為哈希字符串，而會保留原始類名 "myClass"，這樣就能在css模塊的環(huán)境下使用全局樣式（比如bootstrap這種）。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

antd?upload上傳如何獲取文件寬高
這篇文章主要介紹了antd?upload上傳如何獲取文件寬高問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
React使用Redux Toolkit的方法示例
Redux Toolkit可以幫助開發(fā)者更快速、更高效地編寫Redux應(yīng)用,本文主要介紹了React使用Redux Toolkit的方法示例,具有一定的參考價值,感興趣的可以了解一下
2025-04-04
React中實現(xiàn)組件通信的幾種方式小結(jié)
在構(gòu)建復(fù)雜的React應(yīng)用時,組件之間的通信是至關(guān)重要的,從簡單的父子組件通信到跨組件狀態(tài)同步,不同組件之間的通信方式多種多樣,下面我們認識react組件通信的幾種方式,需要的朋友可以參考下
2024-04-04
Redux saga異步管理與生成器詳解
這篇文章主要介紹了Redux saga異步管理與生成器，工作中使用了redux-saga這個redux中間件，如果不明白內(nèi)部原理使用起來會讓人摸不著頭腦，閱讀源碼后特意對其原理做下總結(jié)
2023-02-02
React 的調(diào)和算法Diffing 算法策略詳解
React的調(diào)和算法，主要發(fā)生在render階段，調(diào)和算法并不是一個特定的算法函數(shù)，而是指在調(diào)和過程中，為提高構(gòu)建workInProcess樹的性能，以及Dom樹更新的性能，而采用的一種策略，又稱diffing算法
2021-12-12
React利用React.memo和useCallback緩存彈窗組件
本文主要介紹了React利用React.memo和useCallback緩存彈窗組件,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2025-07-07
ahooks封裝cookie?localStorage?sessionStorage方法
這篇文章主要為大家介紹了ahooks封裝cookie?localStorage?sessionStorage的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
React項目配置axios和反向代理和process.env環(huán)境配置等問題
這篇文章主要介紹了React項目配置axios和反向代理和process.env環(huán)境配置等問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
React高階組件使用教程詳解
高階組件就是接受一個組件作為參數(shù)并返回一個新組件（功能增強的組件）的函數(shù)。這里需要注意高階組件是一個函數(shù)，并不是組件，這一點一定要注意，本文給大家分享React 高階組件HOC使用小結(jié)，一起看看吧
2022-12-12
React如何實現(xiàn)Vue的watch監(jiān)聽屬性
在 Vue 中可以簡單地使用 watch 來監(jiān)聽數(shù)據(jù)的變化，還能獲取到改變前的舊值，而在 React 中是沒有 watch 的，今天通過本文給大家講解React實現(xiàn)Vue的watch監(jiān)聽屬性的方法,需要的朋友可以參考下
2023-06-06