Less中@import外部URL报错是因默认按本地路径解析，需用~前缀透传URL；正确写法为@import url(~"https://...")，~不可与字符串间有空格且不支持变量插值。
Less 中 @import 外部 URL 报错的常见原因
Less 默认把 @import 当作本地文件路径处理，遇到以 http:// 或 https:// 开头的 URL 时，会尝试去本地文件系统查找，导致类似 File not found: https://cdn.example.com/style.less 的错误。这不是语法错误，而是 Less 解析器的路径解析策略问题。
用 ~ 前缀让 Less 跳过路径解析直接透传 URL
~ 是 Less 的「转义导入」标记，它告诉编译器：别当路径处理，原样交给 CSS 输出（即生成 @import url(...)）。必须紧贴引号内容，且仅对字符串字面量有效。
正确写法：
@import url(~"https://fonts.googleapis.com/css2?family=Inter:wght@400;600");
错误写法（少 ~、空格、变量拼接）：
-
@import "https://...";→ 报错，被当本地路径 -
@import ~ "https://...";→ 报错，~和字符串间不能有空格 -
@url: "https://..."; @import ~@url;→ 报错，~不支持变量插值
哪些场景必须用 ~，哪些其实不需要
不是所有外部引用都需要 ~。关键看最终输出目标：
- CSS 原生支持的
@import url(...)→ 必须用~+url()包裹 - 字体
@font-face中的src: url(...)→ 不需要~，这是属性值，不是@import - 通过 Webpack / Vite 等构建工具处理的资源（如
@import "@/styles/vars.less"）→ 路径由 loader 解析，和~无关
注意：~ 只影响 @import 语句本身，不影响其内部是否能解析嵌套的 Less 变量或函数。
实际项目中容易忽略的兼容性细节
虽然 ~"..." 写法在 Less 3.5+ 已稳定，但仍有几个硬伤：
- 部分 IDE（如老版本 WebStorm）无法识别
~后的 URL，会标红或失去语法提示 - 若 URL 含查询参数（如
?v=1.2.3），需确保整个字符串被双引号包裹，否则 Less 可能截断 - 生成的 CSS 里是纯
@import url(...)，浏览器仍受同源策略限制，跨域资源需服务端配CORS
真正要复用远程 Less 文件（比如 UI 库主题），更稳妥的方式是通过 npm 安装后 @import "~library/less/theme.less" —— 这里的 ~ 是 Webpack 别名，和 Less 的 ~ 不是一回事，别混用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
