@import-once在Less 3.5中会报错,因其早在Less 1.4就已被移除,现版本仅支持@import且自动去重;若路径字面量不一致(如引号类型、空格、换行符差异),仍会导致重复加载。

Less 3.5 中没有 @import-once 这个语法,它早在 Less 1.4 就已被移除,现在直接用 @import 即可自动去重 —— 这是很多人查文档翻到旧教程后踩的第一个坑。
为什么 @import-once 在 Less 3.5 中会报错
Less 3.5 的模块系统默认对同一路径的 @import 做唯一性处理,重复导入会被静默忽略。如果你在代码里写了 @import-once "mixins.less";,Less 编译器会直接抛出 ParseError: Unrecognised input,因为该指令已彻底不存在于语法树中。
- Less 1.3.x 及更早版本支持
@import-once - Less 1.4.0(2013 年发布)起废弃并移除,改由核心 import 机制接管去重逻辑
- 所有 3.x 版本(包括 3.5)只认
@import,不识别任何带-once后缀的变体
如何正确管理 CSS 依赖避免重复编译
依赖去重靠的是文件路径的“字面量一致性”和 Less 的内部缓存机制,不是靠关键字。只要路径完全相同(包括引号类型、相对/绝对写法、有无 .less 后缀),就不会重复解析。
- 统一用双引号或单引号,不要混用:
@import "base.less";和@import 'base.less';被视为两个不同路径 - 避免路径歧义:用
@import "./utils/mixins.less";不要写成@import "utils/mixins.less";(后者可能从 node_modules 解析) - Less 不会因变量拼接路径而做去重:
@path: "mixins"; @import "@{path}.less";每次都会重新加载,不可用于依赖控制 - 如果需要条件导入,用
.is-imported()配合 guard 判断,但这是手动方案,非内置机制
检查是否真的发生了重复编译
当怀疑样式重复时,别急着加“once”,先确认是不是路径不一致或作用域污染导致的视觉重复。Less 本身不会生成两份相同的 CSS 规则,但多重 @import 可能触发多次 mixin 展开或变量重定义。
立即学习“前端免费学习笔记(深入)”;
- 启用 Less 编译器的
--verbose模式(如使用 lessc)可看到实际加载了哪些文件 - 用
less.render()的 JavaScript API 时,传入{ paths: [...] }并监听onImport回调,能追踪每次 import 的 resolved 路径 - 编译后搜索输出 CSS 中某条规则出现次数,若真重复,大概率是 mixin 多次调用或 selector 重复嵌套,而非 import 问题
真正容易被忽略的是路径字符串的隐式差异——比如开发时用 VS Code 自动补全插入了全角空格,或 Git 换行符导致路径哈希不匹配,这些都可能让 Less 认为是两个文件。依赖管理的稳定,往往卡在最基础的字符串一致性上。


















