必须配置use: ['style-loader', 'css-loader']，因webpack loader执行顺序从右向左：css-loader先解析@import/url()为模块依赖，style-loader再将结果注入标签；顺序颠倒会导致路径未解析而报错。
css-loader 和 style-loader 必须配合使用，且顺序不能颠倒：use: ['style-loader', 'css-loader'] 是唯一安全的组合。 单独用任何一个都会导致样式不生效或构建报错。
为什么必须 css-loader 在右、style-loader 在左
Webpack 的 use 数组执行顺序是「从右到左」，也就是先运行 css-loader，再运行 style-loader：
-
css-loader负责解析@import、url(./icon.png)等语句，把它们转成模块依赖，并导出一个 JS 模块（通常是字符串数组） -
style-loader接收这个 JS 模块，动态创建<style></style>标签，把 CSS 字符串注入到 - 如果写成
['css-loader', 'style-loader']，style-loader会直接拿到原始 CSS 文本（含未解析的url(./xxx)），然后试图 require 它——立刻触发Module not found: Error: Can't resolve './xxx'
常见错误现象和对应原因
遇到以下报错，基本可以锁定 loader 顺序或缺失问题：
-
Module parse failed: Unexpected token→ 缺少css-loader，Webpack 根本不认识 .css 文件 -
Can't resolve './logo.svg' in './src/styles'→css-loader没执行，或它右边还有别的 loader（比如postcss-loader）但没配对好 - 页面没样式，控制台也无报错 →
style-loader缺失，CSS 被打包进 JS 但没插入 DOM - 样式生效但 HMR 失效（改 CSS 刷新整页）→ 误在开发环境用了
MiniCssExtractPlugin.loader
实际配置中容易被忽略的细节
真实项目里，光写对顺序还不够，这几个点常被跳过：
-
css-loader在 v6+ 默认关闭modules，如果你升级了但没显式设modules: false或modules: { mode: 'local' }，老项目可能突然样式丢失 - 含
url()的 CSS 文件，必须确保对应资源（图片、字体）有asset-module或file-loader处理，否则css-loader解析完也找不到文件 - 想加 PostCSS（如 autoprefixer），
postcss-loader应该插在css-loader右侧、style-loader左侧：即['style-loader', 'css-loader', 'postcss-loader'] - 生产环境换
MiniCssExtractPlugin.loader时，别忘了同时删掉style-loader—— 二者互斥，共存会导致构建失败
loader 链不是越长越好，每个环节都承担明确职责。一旦样式加载出问题，优先检查执行顺序、模块导出是否被下游接收、以及资源路径是否真能被 Webpack 定位到——而不是立刻怀疑 CSS 写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
