react元件引用less樣式失效問題記錄

在react專案中使用了less來預處理css,但是在專案中卻遇到了引用樣式不生效的問題，現記錄如下：

頁面**：

import react,

from
'react'
import
from
'react-redux'
import
'./index.less'
;class
priceprotection
extends
component
}const
mapstatetoprops
=(state)
=>()
const mapdispatchtoprops =
export
default
connect
(mapstatetoprops, mapdispatchtoprops)
(priceprotection)

.price_protection_form_box

}.price_protection_box

以為是自己引用錯誤，不斷除錯，後面發現其實樣式已引入，但相關的class 名在less預處理中編譯時已重新命名了：

而頁面中dom的class名並沒有變：

因為我們在專案中使用了css-loader,自帶的css modules會把所有類名編譯為雜湊字串，所以有下邊兩種方案解決

一 按照css module 規則

1、修改引入方式

import

'./index.less'
;// 修改為
import style from
'./index.less'
;

class

priceprotection
extends
component
>
"title"
>
標題<
/div>
<
/div>
<
/div>)}
}//修改為
class
priceprotection
extends
component
>
>
>
標題<
/div>
<
/div>
<
/div>)}
}二 css modules的全域性作用域
css modules 允許使用:global(.classname)的語法，宣告乙個全域性規則。凡是這樣宣告的class，都不會被編譯成雜湊字串，因此我們可以在less檔案中，所有內容外用:global語法包裹住：
:global
}.price_protection_box
}

React元件引用

需要安裝一些外掛程式 gulp webpack jsx loader react dom react gulp concat browser sync gulp gulpfile.js var webpack require gulp webpack var loader require jsx l...

react 元件樣式 ref標記

語法練習 小總結元件就是乙個個頁面，裡面放html 思考 元件樣式寫在哪？回答 通過link匯入或者寫style 標籤名 style 該語法可以獲取js元素物件vue中實 用 this.refs.標識 建構函式 dom已經被渲染 componentdidmount inputobj type tex...

在react元件中使用樣式

class 元件名稱 extends react.component div 樣式值為字串型別時，需要用單引號包裹 使用雙花括號包裹樣式 可以將內部的一組花括號內的內容抽取成乙個物件 定義classname class 元件名稱 extends react.component 定義外部樣式 divs...