Less文件拆分应遵循单向依赖原则，即组件样式只引入core目录下的变量/混入/函数，禁止互相@import；需配置less-loader的lessOptions.paths支持路径别名；变量用!default声明以实现上层覆盖隔离；修改mixins.less需通过watchOptions.ignored或less-plugin-import-once确保热更新。
Less文件怎么拆才不会循环引用？
Less本身不支持ES模块那种静态分析，@import是预处理时直接拼接文本的。一旦A.less里@import "B"，B里又@import "A"，构建工具（比如less-loader或lessc）会直接报错Recursive import，而不是警告。
- 拆分原则：只允许「单向依赖」——组件样式只引入变量/混入/函数，绝不反向引入其他组件
- 把所有
@variables.less、@mixins.less、@functions.less放在src/styles/core/下，统一由index.less导出 - 组件级Less文件（如
button.less）开头只写@import "../core/index";，不单独导入某个混入文件 - 避免在
core/目录里互相@import，比如@mixins.less里不要@import "@variables"，而是靠index.less控制加载顺序
Webpack里less-loader怎么配才能正确解析路径别名？
less-loader默认不识别resolve.alias，写@import "@/styles/core"会报File not found。必须显式把别名映射传给Less解析器。
- 在
less-loader配置中加lessOptions.paths，指向你项目里别名对应的真实路径：lessOptions: { paths: [path.resolve(__dirname, 'src/styles')] } - 如果用了
@/别名，确保paths里包含src根目录，否则@import "@/core/index"里的@/不会被自动替换 - 不要依赖
resolve.alias自动转换——Less不是JS，它不走Webpack的模块解析链
如何让不同团队共用一套Less变量但不互相污染？
全局@primary-color被多个子项目覆盖后，很容易出现“改一个颜色，三个页面全乱”。关键不是禁用覆盖，而是隔离作用域。
- 所有基础变量定义在
core/variables.less里，用!default标记：@primary-color: #007bff !default; - 各业务模块在自己的入口Less里先
@import变量文件，再用@primary-color: #ff6b35;覆盖——这个覆盖只影响当前@import链之后的内容 - 禁止在
core/里直接赋值，所有具体值都由上层业务样式决定 - 如果用CSS Custom Properties做运行时换肤，Less变量就只负责编译期生成，别试图用
@primary-color去绑定--primary
为什么修改了mixins.less，但组件样式没更新？
Less没有依赖追踪能力。Webpack靠less-loader把每个Less文件当独立模块处理，但@import进来的文件（比如mixins.less）不会触发引用它的组件文件重新编译。
- Webpack需要显式告诉它哪些文件是“被间接引用的”——在
less-loader里加additionalData或用modifyVars都不解决根本问题 - 正确做法：把所有会被复用的
@mixin、@function收口到一个固定路径（如src/styles/core/mixins.less），然后在webpack.config.js的watchOptions.ignored里排除这个路径，确保它参与监听 - 更稳的方式：用
less-plugin-import-once插件（需配合less-loader的lessOptions.plugins），避免重复导入导致的覆盖冲突
工程化不是堆工具，是让每次@import都有可预期的路径、作用域和刷新行为。变量在哪定义、谁有权覆盖、改了谁该重编，这些边界划不清，模块化就只是把文件切得更碎而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
