chrome devtools 看不到 less 变量是因为 @primary-color 是编译时预处理器变量，编译后被替换为具体值，不生成 css 自定义属性 --xxx；需手写 :root { --primary-color: #007bff; } 才能在 devtools 中编辑调试。
Chrome 开发者工具里看不到 Less 定义的 CSS 变量，不是变量没生效，而是你看到的压根不是 CSS 变量——Less 编译后输出的是普通 CSS，--primary-color 这类自定义属性根本不会出现在最终 CSS 文件里，浏览器 DevTools 自然无法识别或显示它们。
Less 里的 @primary-color 不是 CSS 变量
Less 的 @primary-color 是预处理器变量，编译时就被替换成具体值（比如 #007bff），最终 CSS 中不存在 --primary-color 这个声明。你在 DevTools 的 Styles 面板里搜索 --primary-color，当然找不到——它从来就没被输出过。
- Less 变量只存在于编译前，不参与浏览器级样式计算
- DevTools 显示的是运行时 CSS，不是 Less 源码（除非开了 SourceMap 且正确映射）
- 如果你真想在 DevTools 里看到可编辑的变量，得手写
:root { --primary-color: #007bff; }，而不是用@primary-color
SourceMap 正确但变量仍不显示？检查映射路径和缓存
即使启用了 --source-map，DevTools 里也只显示 Less 文件名（如 variables.less），但点击跳转失败或显示空白，大概率是路径错位或缓存干扰。
-
sources字段里的路径（如../src/vars.less）必须能被浏览器直接请求到，CDN 或 Nginx 部署时需确保该路径可访问 - 构建产物未带内容哈希（如
styles.[contenthash].css）时，旧版.map文件可能被缓存，导致指向已删除的源文件 - Chrome DevTools 的 Network 面板中，手动请求
styles.css.map，确认响应体中sources数组内容是否真实可访问
为什么改了 Less 变量，DevTools 里 computed style 却没变？
这不是 DevTools 的问题，而是你误把 Less 变量当成了运行时响应式机制。Less 编译是一次性过程：改完 @primary-color 必须重新编译、重载 CSS，否则页面里还是旧值。
- 热更新（HMR）失效时，Webpack/Vue CLI 可能没监听到
.less文件变化，需检查less-loader是否配置了javascriptEnabled: true且未禁用 watch - Vue 单文件组件中
<style lang="less"></style>内部不能直接用全局@primary-color，除非显式@import或通过vue.config.js注入 - 修改后硬刷页面（Ctrl+Shift+R）比普通刷新更可靠，避免 CSS 缓存干扰
真正容易被忽略的点是：Less 变量和 CSS 变量解决的是不同层面的问题——前者为开发提效，后者为运行时控制。想在 DevTools 里实时调试变量，就得用 --xxx + var()，而不是依赖 Less 编译结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
