直接用 style-loader 无效，必须配对 css-loader 且顺序为 ['style-loader', 'css-loader']；漏掉 css-loader 会导致 webpack 将 css 当 js 解析而报 module parse failed，且 url() 等路径无法解析。
直接用 style-loader 是无效的——它不解析 CSS，只负责把 css-loader 处理完的结果注入 <style></style> 标签。必须配对使用，且顺序不能错。
为什么只写 ['style-loader'] 会报 Module parse failed: Unexpected token
Webpack 默认把 .css 文件当 JS 解析，遇到 . 或 { 就崩。style-loader 不处理原始 CSS 文本，它只认 css-loader 输出的 JS 模块对象（带 toString() 方法）。漏掉 css-loader，等于把裸 CSS 字符串塞给它，必然报错。
- 错误写法：
use: ['style-loader'] - 正确写法：
use: ['style-loader', 'css-loader']（注意：执行顺序从右往左） - 如果用了
@import或url(./logo.png)，但没配css-loader，还会额外报Can't resolve './logo.png'
style-loader 注入位置不固定，insert 选项必须显式控制
默认行为是把 <style></style> 插到 最末尾，但这个“末尾”不是你代码里写的 结束标签位置，而是 DOM 加载完成后的实际 节点。如果你的页面有 Shadow DOM、或样式需覆盖第三方库（如某些 UI 组件强制加 !important），默认插入点可能被压在下面。
- 插到指定容器内：
insert: '#app'（字符串选择器） - 更精确控制：
insert: (element) => document.getElementById('app').appendChild(element) - 不要写
insert: 'head'—— 它不会生效，style-loader不支持 tag 名字作为字符串值
开发用 style-loader，生产千万别硬扛
所有 CSS 打进 JS bundle 后，首屏渲染时 JS 还没执行完，DOM 就先出来了，等 JS 加载、执行、注入 <style></style>，用户会看到明显的 FOUC（Flash of Unstyled Content）。而且 CSS 无法单独缓存，JS 更新一次，样式也得重下。
- 生产环境必须换为
MiniCssExtractPlugin.loader -
MiniCssExtractPlugin.loader在mode: 'development'下直接报错，不能和style-loader共存在同一个 rule 里 - 常见错误：用
process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader'—— 这种写法在 Webpack 5+ 会因配置校验失败而启动不了
lazyStyleTag 不是懒加载，是“手动触发注入”
名字很误导，它不会监听滚动或视口，只是把注入时机延迟到你调用 use() 方法那一刻。适合弹窗、Tab 切换这类明确按需的场景，不适合首屏样式。
- 配置：
{ loader: 'style-loader', options: { injectType: 'lazyStyleTag' } } - JS 中必须：
const styles = await import('./modal.css'); styles.use(); - 忘记调用
use()，样式永远不会出现；重复调用也只生效一次（内部有标记） - 导出的是一个对象，不是立即执行的函数，别写成
import('./modal.css').then(use)——use是模块上的方法，不是回调
最常被忽略的其实是 css-loader 的作用边界：它不管 <link rel="stylesheet"> 或内联 style，那些完全绕过整个 loader 链。只要路径或 @import 报错，第一反应不该是怀疑 style-loader，而是检查 css-loader 是否启用、是否覆盖了对应文件类型、以及图片等资源是否配了 file-loader 或 asset-module。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
