重复 @import 不会报错但会导致变量重定义失效、mixin 重复注入、@media 块膨胀；less 编译器静默重复插入，需用 @import (once) 防护或统一 index.less 出口控制。
重复 @import 不会报错，但会让同一段 CSS 被拼进最终文件多次——后一次覆盖前一次只是表象，真正麻烦的是变量重定义失效、Mixin 重复注入、@media 块爆炸式膨胀。
为什么重复 @import 看似“没报错”却更危险
Less 编译器对重复 @import 完全静默：它不合并、不警告、不 dedupe，只是把内容原样再插一遍。后果是：
- 同一份
variables.less被导入两次 → 第二次的@primary-color: red;不会覆盖第一次的@primary-color: blue;（变量只首次声明生效） - 同一份
mixins.less被导入两次 → 所有.flex-center()类 mixin 生成两份相同 CSS，体积翻倍 - 同一份含
@media的组件样式被导入两次 → 最终 CSS 里出现两个一模一样的@media (min-width: 768px) { ... }块 - Webpack 构建产物中，
sourceMap指向混乱，DevTools 里点不到真实源文件位置
@import (once) 是唯一能防重复的语法
@import (once) 不是“可选优化”，而是必须启用的防护机制。它只在 Less v3.1+ 支持，且仅对**完全相同的路径字符串**生效（区分大小写、相对/绝对路径、别名符号）。
- 正确写法：
@import (once) "base/variables.less";，后续再出现同路径即跳过 - 错误写法：
@import (once) "./base/variables.less";和@import (once) "base/variables.less";被视为两个不同路径，都会导入 - 别名路径要一致：
@import (once) "~@mylib/styles/mixins.less";不能和@import (once) "@mylib/styles/mixins.less";混用 - 不支持通配符：
@import (once) "components/*.less";无效，仍会逐个导入并重复
如何定位项目里哪些文件在偷偷重复导入
靠人眼检查 @import 链不可靠。实际排查要分两步走：
- 先看编译中间产物：用
lessc --verbose main.less > out.css，打开out.css搜索关键选择器（如.btn），数它出现几次；若多于一次，说明上游有重复导入 - 再查导入链：在 VS Code 中右键某个
variables.less文件 → “Find All References”，确认是否被components/button/index.less和pages/home.less同时直接导入 - 禁用所有
@import (reference)临时测试：这种导入虽不输出 CSS，但会影响变量作用域，有时会诱使开发者误加第二遍普通@import - 检查构建工具配置：Webpack 的
less-loader若配了additionalData，它会在每个 Less 文件开头自动注入一段代码——如果这段代码里也含@import "variables.less"，就等于全局多导入一遍
比 (once) 更根本的解法：用 index.less 统一出口
依赖 (once) 是补救，真正可控的方式是切断重复路径本身。每个功能目录下必须有且仅有一个 index.less，它只做三件事：
- 显式
@import本模块所需全部依赖（不漏、不冗余） - 不暴露内部文件路径（禁止其他文件直接
@import "components/button/button.less"） - 对外只提供逻辑聚合，例如
components/index.less写：@import "button/index"; @import "input/index";
根入口 styles/index.less 只导入各层 index.less，形成单向、扁平、可审计的导入树。这样即使某人手抖多写了一次 @import，也会因路径不匹配（比如导入了 components/button/index.less 而非 components/index.less）被立刻发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
