webpack默认不识别.css文件，import会报错；必须配置['style-loader','css-loader']，因use从右向左执行：css-loader先解析@import/url()为模块依赖，style-loader再注入标签。
Webpack默认不识别.css文件，直接import './index.css'会报Module parse failed: Unexpected token
这不是配置漏了，是Webpack根本没能力读CSS——它只认JS模块。必须靠loader“翻译”：先用css-loader把@import、url(./logo.png)这些语法转成模块依赖，再用style-loader把最终的CSS字符串塞进<style></style>标签。
常见错误包括：
-
use: ['css-loader', 'style-loader']顺序写反 →style-loader收到原始CSS文本，遇到url(./logo.png)直接抛Can't resolve './logo.png' - 只装了
css-loader没装style-loader→ 报Cannot read property 'toString' of undefined - 没在
module.rules里配test: /\.css$/→ import语句完全被忽略，无报错但样式不生效
开发环境用style-loader，生产环境必须换MiniCssExtractPlugin.loader
style-loader把CSS打进JS bundle里，热更新快，但上线后会导致FOUC（白屏闪动）和CSS无法独立缓存——JS一更新，样式也得重下。
生产环境要分离CSS文件，三步走：
- 安装：
yarn add mini-css-extract-plugin -D - loader替换：
use: [MiniCssExtractPlugin.loader, 'css-loader']（注意不是style-loader） - 插件注册：
plugins: [new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' })]
关键限制：MiniCssExtractPlugin.loader在mode: 'development'下会直接报错，不能和style-loader混在同一个rule里。得按mode动态切loader：
use: [
process.env.NODE_ENV === 'production'
? MiniCssExtractPlugin.loader
: 'style-loader',
'css-loader'
]
css-loader的modules选项默认不生效
很多人配了modules: true却发现类名还是全局污染——因为这个选项只对显式启用的规则起作用。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
生效方式只有两种：
- 改文件名：用
Button.module.css，Webpack会自动识别并启用Modules - 手动配rule对象：
{ loader: 'css-loader', options: { modules: true } }，且该rule的test必须精确匹配到目标文件（比如/\.module\.css$/）
启用后，JS中必须用import styles from './Button.module.css'，再通过styles.btn访问；若仍写import './Button.css'，就走普通流程，modules完全无效。
<link rel="stylesheet">或内联style完全绕过css-loader，不受Modules控制。
CSS里url(./img/logo.png)打包后404，根源是路径没同步更新
Webpack把图片重命名挪到了dist/img/logo.abc123.png，但CSS里还是写死的url(./img/logo.png)，浏览器当然找不到。
修复逻辑取决于你处理资源的方式：
- 用
file-loader或asset-module（Webpack 5+）：确保css-loader的options.url设为true（默认开启），它会把url()里的路径也交给Webpack解析 - 路径写法要相对CSS文件本身：比如
index.css在src/css/，图片在src/img/，就得写url(../img/logo.png)，不能写url(/img/logo.png)（这是绝对路径，不走Webpack解析） - 如果用了
public目录放静态资源，url(/img/logo.png)能绕过打包，但失去哈希和压缩优势
最易忽略的一点：CSS里所有路径都是相对于CSS文件位置解析的，不是相对于JS入口或webpack.config.js——这点和JS的import行为完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
