less默认将.css文件当作less源码编译导致报错，需用@import (css) "file.css"跳过解析并原样输出为@import url(...)，该语法不支持空格、变量插值和协议头。
Less编译时@import默认会解析CSS文件并报错
Less的@import语句默认把所有.css文件当作Less源码处理，试图编译其中的CSS语法（比如/* comment */里的斜杠、未加引号的url()、属性值里的/等），结果常抛出ParseError: Unexpected input或Invalid CSS after "...": expected 1 selector or at-rule。这不是路径问题，是编译器行为本身导致的。
关键点：Less不会“跳过”CSS文件——除非你明确告诉它“别动这个文件，原样输出”。
用@import (css)强制保留原始CSS内容
在Less中写@import (css) "path/to/style.css";，括号里的css是导入指令（directive），它会让Less跳过解析，直接将该文件内容以@import url(...)形式输出到最终CSS中。
-
(css)必须紧贴@import，中间不能有空格：@import(css)无效，@import (css)才有效 - 路径支持相对路径、绝对路径，但不支持协议头（如
https://）；若需CDN资源，应改用HTML的<link> - 该语句不支持嵌套或变量插值：
@import (css) "@{base}/theme.css";会失败 - 多个
@import (css)会按顺序生成多个@import url(...)，浏览器按此顺序加载
构建工具里启用css-import选项的误区
某些文档提到“开启css-import选项”，这其实是对Less CLI或Node API配置项的误读。Less本身没有全局css-import开关；真正起作用的是@import (css)这个语法级指令。
例如，在Node.js调用Less时传入{ javascriptEnabled: false }或{ paths: [...] }，都**不影响**@import (css)的行为——它始终生效。所谓“选项”，只是旧版Less（@import (inline)等其他指令的遗留说法，与CSS导入无关。
如果你用Webpack + less-loader，也无需额外配置：只要Less源码里写了@import (css)，loader就会照常输出@import url(...)。
替代方案：用@import (inline)嵌入CSS文本但不推荐
@import (inline) "reset.css";会把CSS文件内容原样插入到输出CSS中（非@import url()），看似“引入成功”，但实际埋下隐患：
- 破坏CSS的层叠顺序：被
inline的内容会出现在当前Less文件位置，可能覆盖后续规则 - 无法利用浏览器缓存：CSS内容被内联，每次修改主Less文件都会使整个CSS失效
- 丢失source map映射：调试时看不出样式来自哪个CSS文件
- 若
reset.css本身含@import或@charset，可能引发新解析错误
除非你明确需要内联且能控制所有副作用，否则坚持用@import (css)更稳妥。
最易忽略的一点：IDE或编辑器（如VS Code的Less插件）可能不识别@import (css)语法，标为“unknown directive”，但这不影响Less编译器本身——只要命令行或构建流程用的是真实Less 3.0+，它就有效。别被红波浪线骗了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
