今天想寫一個(gè)css插件，突然想起來style-loader好像有過濾css的功能，試著安裝了一把，最后的html中出現(xiàn)了兩個(gè)<style>塊，這兩個(gè)style中包含的css很少量，與extract后的完整css代碼相比確實(shí)少了很多，本來我以為到此結(jié)束了，可是隨便檢查一個(gè)頁面內(nèi)的元素發(fā)現(xiàn)，控制臺上描述的這個(gè)元素樣式有很多，例如.a .b .c{width:100px}，但在<style>塊中根本找不到（已經(jīng)拷到ide中反復(fù)查找），而拿控制臺中的選擇器直接去找的話，總是把某一個(gè)<style>塊給高亮。
現(xiàn)在的問題是，style-loader把少量的css放在了html的<style>塊中，而檢測頁面的元素發(fā)現(xiàn)樣式不在這個(gè)<style>塊內(nèi)，元素中的樣式究竟寫到哪去了？？
在進(jìn)行組件化的開發(fā)時(shí)(比如vue)，寫在各個(gè)組件內(nèi)的css會在該組件被渲染的時(shí)候才被添加到新的<style>標(biāo)簽中
style-loader 將css插入到頁面的style標(biāo)簽，css-loader是允許webpack識別.css的文件，style-loader是將webpack識別完的css文件中的內(nèi)容，在編譯完運(yùn)行文件的時(shí)候，將這些css用style標(biāo)簽包起來嵌在head內(nèi)，只有寫在行間的css才在html中，其余的引入的css全在head里。
加載中...