less 文件拆分不等于样式隔离，需构建工具配置多入口输出css并动态挂载；@import全量合并会废掉拆分效果；hmr不跨文件响应，须通过additionaldata显式注入公共变量。

Less 本身不参与页面级样式隔离

拆分 .less 文件（比如 header.less、dashboard.less）只是组织源码，编译后仍是普通 CSS —— 浏览器根本不知道哪段 CSS 对应哪个页面。它只认 <link> 或 <style></style> 标签是否加载，不会自动卸载/切换。

构建工具没配多入口或动态挂载，拆了也白拆

常见错误是以为“文件拆开了，样式就自动按需加载了”。实际必须两步都做：

• Webpack：每个 .less 入口配独立 MiniCssExtractPlugin.loader，输出 header.css、dashboard.css
• Vite：在 build.rollupOptions.input 中显式声明对象，如 { header: 'src/less/header.less', dashboard: 'src/less/dashboard.less' }
• HTML 或 SSR 层：根据当前路由，只插入对应 <link href="header.css">；SPA 客户端要用 useEffect 动态增删 <link>，且 key 设为路径，否则旧样式残留

@import 全量合并会直接废掉拆分效果

哪怕你写了十个模块文件，只要在主入口 index.less 里写了一行 @import 'header.less'; @import 'dashboard.less';，Less 就会在编译时把它们全塞进一个输出文件里——体积没变，加载还是全量，隔离彻底失效。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

真正该做的是：

• 所有模块 .less 文件顶部第一行必须 @import 'common.less';（用 resolve.alias 统一路径，禁用相对路径）
• common.less 加 .module 后缀或以下划线开头（如 _common.less），确保它不被单独编译成 CSS
• 禁止把 common.less 当作普通入口去编译，否则变量重复注入、HMR 失效

热更新（HMR）不跨文件响应，改变量其他页面不刷新

这是最容易被忽略的细节：HMR 默认只监听当前编辑的文件。你改了 common.less 里的 @primary-color，但 header.css 和 dashboard.css 不会自动重编译，浏览器里样式还是旧的。

解决方法很实在：

• Webpack 用户：在 module.rules 的 less-loader 配置中加 additionalData: '@import "common.less";'，让每个模块都“显式依赖”它
• Vite 用户：用 css.preprocessorOptions.less.additionalData 做同样事
• 别指望 @import (reference) 能触发 HMR —— 它只管变量引入，不参与构建依赖图

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！