less变量无法跨模块自动同步，根本原因是变量作用域限于单次编译上下文，@import仅为局部合并而非全局状态；modifyvars仅影响顶层入口，不穿透至被@import的模块；可靠方案是统一变量源+!default+显式覆盖链，并正确配置less-loader.paths与监听机制。
Less变量无法跨模块自动同步，根本原因不是配置漏了，而是变量作用域只存在于单次编译上下文里——每次@import都是一次局部合并，没有“全局状态”。
为什么less-loader的modifyVars对多模块无效
很多人以为在less-loader里配modifyVars: { '@primary-color': '#ff6b35' }就能让所有.less文件都用上这个值，实际不行。因为modifyVars只影响**顶层入口文件**的编译环境，而模块间通过@import引入的变量仍按各自@import链解析，不会被modifyVars覆盖。
- 入口
index.less里写color: @primary-color;→ 能取到modifyVars值 - 但
button.less里也写了color: @primary-color;，且它只@import "../core/variables.less"→ 这个@primary-color来自文件本身，modifyVars不穿透 - 结果：按钮颜色还是
variables.less里定义的默认值，和入口不一致
真正可靠的共享方式：统一入口 + !default + 显式覆盖链
变量同步不是靠 loader 配置“广播”，而是靠人工构建一条可控的、可追溯的覆盖链。核心是让所有模块最终都依赖同一个变量源，并允许上层覆盖。
- 所有基础变量必须定义在单一文件（如
src/styles/core/variables.less），且全部用!default：@primary-color: #007bff !default; - 每个业务模块（如
button.less）开头只写：@import "../core/variables.less";，不加任何!default覆盖 - 主题级覆盖放在最外层入口（如
theme-dark.less）中：@import "../core/variables.less"; @primary-color: #1a1a1a;，再@import "button.less" - Webpack 中只
import './theme-dark.less'，不直接import './button.less'
less-loader的paths配置必须匹配@import路径语义
如果用了@/别名，@import "@/styles/core/variables"这种写法在less-loader里会报错File not found——因为 Less 不走 Webpack 的resolve.alias，它只认真实文件系统路径。
- 必须在
less-loader的lessOptions.paths中显式加入：path.resolve(__dirname, 'src/styles') - 然后
@import写成相对路径：@import "core/variables.less";，或带点号的：@import "./core/variables.less"; - 不要混用：
@import "@/core/variables"+paths: [src]→@/不会被自动替换，@import会去查字面路径node_modules/@/core/variables - 验证是否生效：把
variables.less里@primary-color改成错别字，看编译是否报Cannot resolve variable
容易被忽略的缓存陷阱：修改variables.less后样式不更新
Less 没有依赖追踪，variables.less被多个文件@import，但构建工具只监听入口文件变更。改了变量文件，webpack 默认不会重新编译所有引用它的模块。
- Webpack 项目需在
less-loader配置中加lessOptions.javascriptEnabled: true（仅限可信环境），并配合watchOptions.ignored排除node_modules，否则 watch 可能卡住 - Vite 用户注意：
vite-plugin-less默认不监听被@import的依赖文件，需手动加watchFiles: ['src/styles/**/*'] - 最稳方案：把
variables.less加进入口import链，例如在main.js里import '@/styles/core/variables.less'（即使它不输出 CSS），强制构建器把它纳入依赖图
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
