Webpack需配置css-loader和style-loader（或mini-css-extract-plugin）才能解析CSS；须在module.rules中声明规则且顺序正确；第三方样式路径应查package.json或源码目录；避免全局污染可借助CSS Modules、:where()作用域限定或选用支持样式的组件库；构建后失效需检查插件配置、publicPath及splitChunks。
npm 包里的 CSS 怎么被 webpack 正确识别
webpack 默认不处理 .css 文件，直接 import 'some-pkg/style.css' 会报 Module parse failed: Unexpected token。必须配置 css-loader 和 style-loader（或 mini-css-extract-plugin）才能解析和注入样式。
常见错误是只装了 loader 却没在 webpack.config.js 的 module.rules 中声明规则，或者规则顺序写反（style-loader 必须在 css-loader 左侧）。
- 确保已安装：
npm install --save-dev css-loader style-loader - 规则示例（webpack 5+）：
module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] } - 若用
mini-css-extract-plugin提取 CSS 文件，开发环境仍建议保留style-loader，生产环境才换插件
第三方包的样式路径怎么找才不踩空
很多 npm 包（如 element-plus、ant-design、normalize.css）不把样式放在根目录，也不一定叫 index.css。盲目 import 'xxx/css' 很容易 404。
正确做法是查包的 package.json 中的 style、main 或 exports 字段，或直接翻 node_modules/xxx/ 目录结构。
立即学习“前端免费学习笔记（深入）”；
-
normalize.css：路径是normalize.css/normalize.css，不是normalize.css -
element-plus：按需引入需用element-plus/theme-chalk/base.css，全量引入用element-plus/dist/index.css -
ant-design（v5+）：官方推荐用antd/dist/reset.css替代旧版antd/dist/antd.css
如何避免全局样式污染和作用域冲突
直接 import 第三方 CSS 是全局生效的，一旦多个包都重置 button 或 body 样式，极易互相覆盖。尤其在微前端或多团队协作项目里，这个问题会突然爆发。
没有银弹，但可分层控制：
- 优先用支持 CSS-in-JS 或 CSS Modules 的组件库（如
@mantine/core），天然隔离 - 对传统包（如
highlight.js），用:where()或:is()限定作用域：.my-editor :where(pre code) { ... } - Webpack +
css-loader开启modules.auto可自动为非.module.css文件启用局部作用域（慎用，可能破坏第三方样式逻辑）
构建后 CSS 没生效？检查 source map 和提取时机
开发时样式正常，build 后失效，大概率是 mini-css-extract-plugin 配置缺失或与 splitChunks 冲突，导致 CSS 没被抽成独立文件，或被 chunk 分割策略丢弃。
另一个隐蔽问题是 CSS source map 路径错乱，浏览器 DevTools 显示样式来自 http://localhost:8080/static/css/main.css，但实际请求 404 —— 这通常是 output.publicPath 没配对。
- 确认
mini-css-extract-plugin的filename和chunkFilename与output.filename协调一致 - 检查
publicPath：本地开发设为/，CDN 部署需设为完整 URL 前缀（如https://cdn.example.com/assets/） - 禁用
optimization.splitChunks.chunks: 'all'可能导致 CSS 被误塞进 JS chunk；建议显式指定cacheGroups分离样式
