<愛尬聊_生活百科>

今天想寫一個css插件，突然想起來style-loader好像有過濾css的功能，試著安裝了一把，最后的html中出現(xiàn)了兩個<style>塊，這兩個style中包含的css很少量，與extract后的完整css代碼相比確實少了很多，本來我以為到此結(jié)束了，可是隨便檢查一個頁面內(nèi)的元素發(fā)現(xiàn)，控制臺上描述的這個元素樣式有很多，例如.a .b .c{width:100px}，但在<style>塊中根本找不到（已經(jīng)拷到ide中反復(fù)查找），而拿控制臺中的選擇器直接去找的話，總是把某一個<style>塊給高亮。

現(xiàn)在的問題是，style-loader把少量的css放在了html的<style>塊中，而檢測頁面的元素發(fā)現(xiàn)樣式不在這個<style>塊內(nèi)，元素中的樣式究竟寫到哪去了？？

---

只想悄悄說一句 2022-04-25 11:54

在進行組件化的開發(fā)時(比如vue)，寫在各個組件內(nèi)的css會在該組件被渲染的時候才被添加到新的<style>標簽中

---

yang4633010 2022-04-25 12:21

style-loader 將css插入到頁面的style標簽，css-loader是允許webpack識別.css的文件，style-loader是將webpack識別完的css文件中的內(nèi)容，在編譯完運行文件的時候，將這些css用style標簽包起來嵌在head內(nèi)，只有寫在行間的css才在html中，其余的引入的css全在head里。

---