less编译无法自动生成多个独立css文件，必须依赖webpack或vite等构建工具配置多入口；需避免主文件@import全量合并，统一管理变量/mixin于common.less并显式导入，启用contenthash防缓存，配置hmr依赖追踪确保公共变更生效。
Less编译时怎么生成多个独立CSS文件
不能靠Less自己拆，它天生是单入口单输出。想按模块出header.css、dashboard.css，得靠构建工具接管流程。
常见错误是直接在@import里写路径试图“自动拆分”，结果只是合并进一个文件，体积没变，加载还是全量。
- 用Webpack时，每个
.less入口文件配一个MiniCssExtractPlugin.loader规则，入口名即输出CSS名 - Vite用户需配
build.rollupOptions.input为对象，显式列出多个入口，如{ header: 'src/less/header.less', dashboard: 'src/less/dashboard.less' } - 避免在主
index.less里@import所有模块——这等于又绕回单文件，拆分失效
如何让不同页面只加载对应CSS（不重复、不漏）
拆出多文件只是第一步，关键在HTML里精准挂载。浏览器不会猜你哪页要哪份样式。
典型翻车场景：路由切换后旧CSS没卸载，新CSS又加载，样式叠加冲突；或者SPA中用import('./xxx.less')但没配style-loader的insert选项，样式插到head末尾导致优先级错乱。
- 服务端渲染（SSR）：根据当前路由，只注入对应
<link href="xxx.css">，删掉全局app.css - 客户端路由（如React Router）：用
useEffect动态创建/移除<link>标签，key设为路由路径，避免残留 - 别依赖
less-loader的javascriptEnabled做运行时计算——它不参与拆分逻辑，纯属误导
变量和mixin跨文件复用时为啥报错
拆分后@import路径写错或顺序颠倒，Undefined variable或Unknown mixin立刻出现。Less不支持“声明提升”，必须确保依赖先于使用。
比如variables.less定义了@primary-color，但button.less在它之前被编译，就会炸。
- 所有公共变量、mixin统一放
common.less，每个模块less文件顶部第一行@import 'common.less'; - 禁止用相对路径
@import '../common.less'——路径随入口文件位置变，极易断，改用Webpack的resolve.alias或Vite的resolve.alias配@styles指向根目录 - 不要把
common.less单独编译成CSS——加.module后缀或放在src/less/_common.less（下划线前缀告诉构建工具这是partial）
热更新（HMR）为什么改了变量其他页面样式不更新
因为拆分后各CSS文件相互隔离，HMR默认只刷新当前变更文件对应的模块。改了common.less，header.css和dashboard.css都不会响应。
这不是Less的问题，是构建工具链没配置依赖追踪。
- Webpack：在
less-loader里加additionalData选项，把common.less内容注入每个入口，让它成为“隐式依赖” - Vite：用
css.preprocessorOptions.less.additionalData同理注入，否则改变量只能全站刷新 - 别指望
@import自动触发HMR——它只影响编译时，不建立运行时依赖图
最麻烦的其实是缓存：CDN或浏览器把旧CSS文件缓存住了，即使拆分正确，用户也看不到更新。务必给每个CSS文件加内容哈希，比如header.[contenthash:8].css，不然白忙活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
