css-loader必须显式设sourceMap:true，因Webpack的devtool对CSS无效；若未开启，会丢弃上游sourcemap并输出空壳，导致浏览器无法跳转至.scss或.less源文件。
css-loader 必须显式设 sourceMap: true
Webpack 的 devtool 配置对 CSS 完全无效，它只影响 JS 层。即使你写了 devtool: 'source-map'，css-loader 默认仍会丢弃上一步传来的 sourcemap，并输出一个空壳 map —— 浏览器里点样式就跳不到 .scss 或 .less 文件。
实操建议：
-
css-loader的options中必须写明sourceMap: true，不能依赖继承或默认值 - 若用了
mini-css-extract-plugin，它会在生成 CSS 时重写sourceMappingURL，需额外加publicPath: ''防止路径变成http://localhost:3000/css/app.css.map这类绝对地址 - 多个 loader 链式调用时（如
postcss-loader→css-loader），前序 loader 也得开sourceMap: true，否则传不到css-loader
loader 顺序错误会导致 sourcemap 断链
Webpack 中 loader 是从右往左执行的，sourcemap 传递方向相反：必须由最右侧 loader（如 sass-loader）先生成原始 map，再经 postcss-loader、css-loader 逐层透传，最后到 style-loader 或 mini-css-extract-plugin 输出。
常见断裂点：
立即学习“前端免费学习笔记（深入）”；
-
postcss-loader没配sourceMap: true，autoprefixer 处理后原始映射直接丢失 -
css-loader开了sourceMap: true，但前面postcss-loader关着，等于没传进来 -
style-loader在开发模式下不干预 sourcemap，但若误加了injectType: 'linkTag'等非默认配置，可能绕过内联逻辑导致失效
Vue CLI 项目要额外透传 javascriptEnabled
Vue CLI 默认用 css-loader + vue-style-loader，但 Less/Sass 的 @import 解析失败会导致 sourcemap 的 sources 字段路径错乱（比如写成 ../../src/vars.less 而非真实可访问路径）。
必须在 vue.config.js 中补上：
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
否则即使所有 loader 都开了 sourceMap: true，浏览器 DevTools 也会显示 “no sources” 或跳转 404。
检查 sources 字段是否真能被浏览器加载
生成的 .map 文件里 sources 数组写的路径，必须是开发服务器实际能响应的 URL 路径。比如默认生成 ["../src/button.scss"]，但你的服务根目录是 /myapp/，那浏览器就会尝试请求 http://localhost:8080/myapp/../src/button.scss —— 404。
解决办法：
- 用
devtoolModuleFilenameTemplate: '[absolute-resource-path]'让sources写成绝对路径（如/Users/me/project/src/button.scss），再配合 webpack-dev-server 的static配置暴露源码目录 - 命令行编译 Sass/Less 时加
--source-map-rootpath=/src/，让sources变成["/src/button.scss"]，然后 Nginx 或 dev-server 映射/src/到本地源码目录 - 手动
curl http://localhost:8080/app.css.map，再对每个sources里的路径curl -I确认返回 200
sourceMap，而是 sources 字段里那个看似无关紧要的路径字符串——它只要不能被浏览器按当前页面 URL 解析出来，整条 sourcemap 链就等于没连上。 
