style-loader必须与css-loader配合使用，单独配置无效；因style-loader仅注入标签而不解析@import/url()，需css-loader先将路径转为模块依赖，执行顺序必须为['style-loader','css-loader']（从右向左）。
style-loader 必须和 css-loader 配合使用，单独用会失效
直接写 use: ['style-loader'] 是没用的。因为 style-loader 只负责创建 <style></style> 标签并插入 DOM，它不解析 @import、url(./icon.png) 这类语法——这些都得靠 css-loader 提前处理成模块依赖。否则浏览器控制台会报 Module not found: Error: Can't resolve './icon.png'。
正确顺序只能是：use: ['style-loader', 'css-loader']。Webpack loader 执行方向是「从右到左」，所以 css-loader 先跑，把路径转成 require 调用；style-loader 再接收处理后的 JS 字符串，生成并注入 <style></style>。
- 错配顺序（如
['css-loader', 'style-loader']）会导致所有相对资源加载失败 - Webpack 5+ 启用
experiments.css时可跳过这两个 loader，但仅限纯 CSS，不支持@import或url()中的相对路径 - 如果用了 Sass/Less，还得在
css-loader右侧继续加sass-loader或less-loader
injectType 决定怎么插、插几个
injectType 是 style-loader 最关键的配置项，默认是 styleTag，即每个 import './a.css' 都生成一个独立的 <style></style> 标签。这在开发期没问题，但样式多时 DOM 里会堆一堆 <style></style>，影响性能。
常见选项对比：
-
styleTag：默认，每个 CSS 模块一个<style></style>；适合开发，兼容 HMR -
singletonStyleTag：所有 CSS 合并进同一个<style></style>；减少标签数量，但 HMR 可能失效（改一个文件，整个样式重刷） -
lazyStyleTag：样式不会立即注入，要调用useStyles()才触发；适合按需加载场景，比如弹窗组件的专属样式 -
linkTag：生成<link rel="stylesheet">标签，加载外部 CSS 文件；实际仍走 JS 动态插入，不是真正静态链接
配置示例：
use: [{<br> loader: 'style-loader',<br> options: { injectType: 'singletonStyleTag' }<br>}, 'css-loader']
生产环境别用 style-loader，换 MiniCssExtractPlugin
style-loader 把 CSS 打进 JS bundle，运行时才创建 <style></style>，好处是热更新快，坏处是：CSS 无法被 CDN 缓存、不能并行下载、压缩率低、首屏渲染阻塞更明显。
生产构建必须换成 MiniCssExtractPlugin.loader：
use: [MiniCssExtractPlugin.loader, 'css-loader']
- 它把 CSS 单独抽成
.css文件，用<link>引入，利于缓存与 CDN 分发 - 代价是：不支持 HMR，改 CSS 会整页刷新；也不支持异步 chunk 中的 CSS（除非手动加
MiniCssExtractPlugin.loader的hmr选项） - 开发环境保留
style-loader，生产环境切换，通常用webpack.mode === 'production'控制
容易忽略的细节：insert、attributes 和样式隔离
style-loader 默认把 <style></style> 插入 底部，但你可以用 insert 改变位置，比如插到某个元素前：
options: { insert: '#app' } 或用函数：options: { insert: (element) => document.getElementById('custom-styles').appendChild(element) }
还可以加属性防 XSS：
options: { attributes: { nonce: 'abc123' } } 这样生成的标签是 <style nonce="abc123"></style>，配合 CSP 策略生效。
如果要用 CSS Modules，记得在 css-loader 开启：
{ loader: 'css-loader', options: { modules: true } } 此时 style-loader 不影响，它只管注入，不干涉 class 名映射逻辑。
真正麻烦的是多个入口共用同一份样式时的竞态——比如两个动态 import 的组件同时调用 useStyles()，lazyStyleTag 模式下可能重复插入。这种边界情况，得靠代码层加锁或统一管理样式生命周期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
