less变量需通过构建工具在编译期导出为js可读形式（如variables.js），js无法直接读取@primary-color；js变量也无法实时影响less编译，动态主题应借助css自定义属性实现。
Less变量怎么被JS读取到
Less编译时变量是静态的，JS运行时根本接触不到，直接想用@primary-color这种写法在JS里取值，一定会失败。必须靠构建工具在编译阶段把变量“导出”成JS能识别的形式。
常见错误现象：ReferenceError: primaryColor is not defined，或者JS里拿到的是字符串"@primary-color"而非真实值。
- 推荐做法：用
less-vars-to-js或less-plugin-custom-properties插件，在Less编译时生成一个variables.js文件 - Webpack用户可配置
less-loader的additionalData+less-plugin-js-vars，把JS对象注入Less作用域（单向） - 注意路径问题：生成的JS变量文件需被JS模块正确
import，且不能被Tree-shaking误删（加/*#__PURE__*/注释不保险，建议放src/constants/less-variables.js并显式引入）
JS变量怎么影响Less编译结果
Less本身不执行JS，所以JS运行时的值（比如用户主题切换）无法实时改Less样式。所谓“动态”，只能发生在构建时或CSS自定义属性（CSS Custom Properties）层面。
使用场景分两类：构建期确定的配置（如环境主题）、运行时切换的主题（需配合CSS变量）。
- 构建期：用
webpack.DefinePlugin注入process.env.THEME，再在Less里用if()函数配合@theme: ~`process.env.THEME`（需启用javascriptEnabled: true，但有安全风险，慎用） - 运行时：JS修改
document.documentElement.style.setProperty('--primary-color', '#ff6b35')，Less里用@primary-color: var(--primary-color, #007bff)回退 - 性能影响：过度依赖
javascriptEnabled会让Less编译变慢，且无法做静态分析；CSS变量方案无编译开销，但不支持伪类、媒体查询内插值
Webpack + Less + JS变量同步的最小可行配置
不用复杂插件链，三步搞定基础同步：导出、注入、消费。
假设项目用Webpack 5 + less-loader 11：
- 第一步：在
src/styles/variables.less末尾加.export-variables() { .make-js-export(); }，并用less-plugin-js-vars生成src/styles/less-variables.js - 第二步：Webpack配置中
less-loader添加additionalData: '@theme: "light";'，让所有Less文件默认有@theme变量 - 第三步：JS里
import { primaryColor } from './styles/less-variables.js'，CSS里用color: @primary-color;（编译后即具体值）或color: var(--primary-color);（运行时可变） - 容易踩的坑：
less-variables.js若含module.exports = {...}，ESM项目需配resolve.extensions: ['.js', '.cjs']或改用export const primaryColor = ...
为什么不能直接在JS里require Less文件
因为require('xxx.less')不会返回变量对象，而是一段空字符串或编译后的CSS文本（取决于loader配置），更可能直接报错Cannot find module 'xxx.less'。
本质是模块系统和样式预处理器的职责边界问题：Less负责生成CSS，JS负责逻辑，二者交界必须显式桥接。
- Webpack默认不解析
.less为JS模块，要支持需额外配置rules匹配test: /\.less$/并用css-loader+less-loader，但这仍只产出CSS字符串 - 真正需要的是“变量映射”，不是“样式加载”，所以必须借助插件在编译流程中提取、转换、输出
- 最简验证方式：运行
npx lessc --js-vars src/styles/variables.less（需less-plugin-js-vars），看是否输出合法JS对象——这是所有方案的前提
变量同步这件事，核心不在语法多炫，而在构建流程里哪一步做、谁负责序列化、谁负责反序列化。漏掉任意一环，JS和Less就还是各过各的。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
