webpack默认不识别.css文件，import会报错；必须配置['style-loader','css-loader']，因use从右向左执行：css-loader先解析@import/url()为模块依赖，style-loader再注入标签。
Webpack 默认完全不认识 .css 文件，import './index.css' 会直接报错：Module parse failed: Unexpected token。必须配 css-loader 和 style-loader，且顺序不能错——这是最常卡住人的第一步。
为什么 use: ['style-loader', 'css-loader'] 顺序不能反？
Webpack 的 use 数组执行顺序是从右向左：css-loader 先处理，把 @import、url(./logo.png) 这些语法转成模块依赖；再交给 style-loader 把最终的 CSS 字符串注入 <style></style> 标签。
如果写成 ['css-loader', 'style-loader']：
-
style-loader先收到原始 CSS 文本（含未解析的url(./logo.png)） - 它不解析路径，直接传给浏览器，结果报
Can't resolve './logo.png' - 甚至抛出
TypeError: Cannot read property 'toString' of undefined
开发环境用 style-loader，生产环境必须换掉
style-loader 在开发时热更新快，没问题；但上线后所有 CSS 都打进 JS bundle，会导致两个严重问题：
- 首屏白屏后突然“闪”出样式（FOUC）
- CSS 无法独立缓存，JS 更新一次，整个样式也得重下
生产环境必须用 MiniCssExtractPlugin：
- 安装：
yarn add mini-css-extract-plugin -D - loader 替换：
use: [MiniCssExtractPlugin.loader, 'css-loader'] - 插件注册：
plugins: [new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' })]
关键限制：MiniCssExtractPlugin.loader 在 mode: 'development' 下直接报错，不能和 style-loader 混在同一个 rule 里。
css-loader 的 modules 选项为什么没生效？
css-loader 的 modules 不是全局开关，只对显式启用的规则生效：
- 普通
.css文件默认不开启 Modules，类名仍是全局的 - 想局部化，要么改文件名为
Button.module.css，要么在rule中写成对象：{ loader: 'css-loader', options: { modules: true } } - 启用后，JS 中必须用
import styles from './Button.module.css'，再通过styles.btn访问类名；import './Button.css'仍走普通流程 -
<link rel="stylesheet">或内联style完全绕过css-loader，不受 Modules 影响
url(./img/logo.png) 打包后 404 怎么修？
根源是 CSS 里的相对路径没同步更新：Webpack 把图片重命名、挪到 dist/img/xxx.abc123.png，但 CSS 里还是 url(./img/logo.png)。
解决方法取决于你用的资源处理方式：
- Webpack 5+ 推荐用
asset-module（不用额外装url-loader或file-loader）：{ test: /\.(png|jpe?g|gif)$/i, type: 'asset' } - 确保
css-loader的url解析能力启用（默认开启），它会把url()转为模块请求 - 检查
output.publicPath是否配置正确，尤其当静态资源部署在子路径时
最容易被忽略的是：CSS 文件本身是否被 css-loader 正确接管——比如漏写了 test: /\.css$/，或正则写成 /\.scss$/ 却去 import .css。这种情况下，url() 根本不会进 pipeline，自然找不到资源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
