babel-loader是否把所有的css都注入到html中了？？

今天想写一个css插件，突然想起来style-loader好像有过滤优艾设计网_设计百科css的功能，试着安装了一把，最后的html中出现了两个<style>块，这两个style中包含的css很少量，与extract后的完整css代码相比确实少了很多，本来我以为到此结束了，可是随便检查一个页面内的元素发现，控制台上描述的这个元素样式有很多，例如.a .b .c{width:100px}，但在<style>块中根本找不到（已经拷到ide中反复查找），而拿控制台中的选择器直接去找的话，总是把某一个<style>块给高亮。

现在的问题是，style-loader把少量的css放在了html的<style>块中，而检测页面的元素发现样式不在这个<style>块内，元素中的样式究竟写到哪去了？？

---

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

在进行组件化的开发时(比如v优艾设计网_PS百科ue)，写在各个组件内的css会在该组件被渲染的时候才被添加到新的<style>标签中

---

yang4633010 优艾设计网_设计百科 2022-04-25 12:21

style-loader 将css插入到页面的style标签，css-loader是允许webpack识别.css的文件，style-loader是将webpack识别完的css文件中的内容，在编译完运行文件的时候，将这些css用style标签包起来嵌在head内，只有写在行间的css才在html中，其余的引入的css全在head里。

---