Webpack CSS样式未生效常因入口文件未import CSS导致构建链断开；必须手动import './index.css'，且路径、后缀、条件注释均需检查，确保CSS被loader捕获并纳入依赖图谱。
Webpack 构建时 CSS 样式未生效，常因 input 配置遗漏导致入口文件根本没触达任何 CSS 依赖，整个样式链从源头就断开——比如只写了 JS 入口却忘了在 JS 中 import './index.css'，或入口文件里 import 的路径拼错、后缀缺失、被条件注释包裹。
确认 CSS 是否被实际纳入构建图谱
打开 webpack 打包日志（运行 webpack --stats=verbose），搜索关键词 css 或 .css，观察是否有模块被解析并进入 dependency graph；若完全无记录，说明 Webpack 根本没看到任何 CSS 文件。
检查你项目中所有声明为 entry 的文件（如 src/index.js、src/main.tsx），逐行确认是否显式 import 了 CSS/SCSS/Less 文件。注意：CSS 不会像 JS 那样被自动扫描引入，【必须手动 import 才能进构建流程】。
如果使用了动态 import() 或 code-splitting，确保 import('./styles/theme.css') 这类语句没有被逻辑条件包裹（例如 if (false) import('./a.css')），否则 webpack 会直接跳过解析。
立即学习“前端免费学习笔记（深入）”；
验证 CSS 文件是否被 loader 正确捕获
方法一：检查 rules 中 test 正则是否覆盖目标文件后缀
在 webpack.config.js 的 module.rules 数组中，定位匹配 CSS 的 rule，确认 test: /\.css$/i 同时覆盖了你的实际文件名——比如你写的是 index.scss，但 rule 只写了 /\.css$/，那它就被完全忽略；此时需补上 /\.(css|scss|sass|less)$/i。
方法二：用 console.log 插桩验证 loader 是否执行
临时修改 css-loader 的 use 配置，在其 options 中加入 getLocalIdent: () => { console.log('css-loader triggered'); return 'dummy'; } ，重新打包；若控制台无输出，说明该 rule 根本没命中文件。
注意：Webpack rules 是按顺序遍历的，一旦前面某条 rule 的 test 和 exclude 组合把 .css 文件“提前拦截”进 file-loader 或 asset-module，后面 css-loader 就永远收不到它——检查是否有类似 { test: /\.(png|jpg|gif|css)$/, type: 'asset/resource' } 这种宽泛配置挡在前面。
定位具体哪一级 input 被遗漏
第一步：列出全部 entry 配置项，包括字符串、对象、函数返回值形式
第二步：对每个 entry 文件，执行「向上溯源」：打开该文件 → 查找所有 import/require → 对每个导入路径，检查是否存在对应物理文件（注意大小写、.js/.ts 后缀省略规则、resolve.extensions 配置）
第三步：对每个成功解析的模块，继续递归检查它的 import 链，直到发现第一个 CSS 文件；若整条链中没有任何 import 'xxx.css' 或 require('yyy.scss')，就是根源性遗漏。
第四步：若发现某 CSS 文件被 import，但构建日志仍不显示，立刻检查该文件路径是否被 resolve.alias 错误重写，或被 IgnorePlugin 显式排除。
这一步操作起来很简单，直接把 import 语句补全就行，但漏掉一个分号或引号就前功尽弃。
