怎样为Webpack的CSS启用Less Source Map-css教程-PHP中文网

less-loader 必须显式配置 sourcemap: true，因 webpack devtool 对 css 无效；css-loader、postcss-loader、minicssextractplugin 也需各自开启 sourcemap 并对齐路径，否则源码映射断裂。

怎样为webpack的css启用less source map

less-loader 必须显式开启 sourceMap

Webpack 默认不传递 sourceMap 信息给 less-loader，即使你配了 devtool，它也完全无视——devtool 只影响 JS，对 CSS 链路无效。必须在 less-loader 的 options 中手动设 sourceMap: true。

常见错误：只在 css-loader 或 postcss-loader 开了 sourceMap，但漏掉 less-loader，结果 Less 源码行号直接丢失，跳转到空白或错位位置。

less-loader@6+：用 { loader: 'less-loader', options: { sourceMap: true } }
less-loader@7+：同上，但注意 less 本身版本需 ≥4.0，否则 --source-map 行为不兼容
若项目含 @import，建议额外加 sourceMapIncludePaths: true（部分版本支持），避免 sources 字段缩写成 mixins.less 而非完整路径

css-loader 和 MiniCssExtractPlugin 都不能吃掉 map

css-loader 默认会“消化”上游传来的 Source Map 并生成新映射，导致行号漂移；MiniCssExtractPlugin 默认把 sourceMappingURL 写成绝对路径（如 http://localhost:8080/css/app.css.map），而实际开发服务器常挂载在子路径（如 /myapp/）下，浏览器按当前 CSS URL 解析相对路径时直接 404。

css-loader 必须配 { sourceMap: true }，否则它会丢弃 less-loader 传来的原始映射
MiniCssExtractPlugin.loader 的 options.publicPath 设为空字符串 ''，让 sourceMappingURL 保持相对路径（如 app.css.map），由浏览器按当前 CSS 文件位置解析
如果用了 postcss-loader（比如加了 autoprefixer 或 px2rem），它的 sourceMap: true 也不能少，否则 PostCSS 处理阶段也会截断映射链

验证 .map 文件是否真能被加载

DevTools 里看不到源文件，往往不是没生成，而是 .map 文件或其中 sources 列表里的路径根本请求不到。别只盯着 Sources 面板，先手动验证 HTTP 层。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

打开浏览器开发者工具 → Network 标签页，刷新页面，过滤 css.map，确认该请求返回 200 且响应体是合法 JSON
检查 JSON 中 sources 字段：值应为可访问的 HTTP 路径（如 ["/src/variables.less"]），而非 webpack:///./src/variables.less（VS Code 不认这种协议路径）
对 sources 里每个路径，用 curl -I http://localhost:8080/src/variables.less 测试是否返回 200；出现 404 就说明开发服务器没正确 serve 源文件目录
Less 4.0+ 编译命令行若用 lessc --source-map-rootpath=/src/，则 sources 会补全为绝对路径，部署时更稳