less默认将.css文件当less源码解析，导致@import "xxx.css"必报错；必须用@import (css) "path.css"语法跳过解析，原样输出css @import url()，括号与@import间不能有空格，不支持协议头和变量插值。
Less 默认会把 .css 文件当 Less 源码解析，直接 @import "xxx.css" 几乎必报错——这不是路径或网络问题，是编译器行为本身导致的。
为什么 @import "xxx.css" 会报错
Less 编译器看到 .css 后缀就默认进入“解析模式”：它会尝试处理注释里的 /、url() 里没引号的路径、属性值中的 /（比如 background: url(img/a.png) / cover），结果常抛出 ParseError: Unexpected input 或 Invalid CSS after ""。你改路径、清缓存、换相对/绝对写法都没用——根源在解析动作本身。
常见错误现象包括：
-
@import "reset.css";→ 报Expected 1 selector or at-rule -
@import "./node_modules/normalize.css/normalize.css";→ 报Missing closing ')'（因 normalize.css 里有大量calc()和斜杠分隔语法）
必须用 @import (css) 跳过解析
这是唯一可靠的语法级开关，不是配置项，也不是插件选项。它强制 Less 放弃解析该文件，原样输出为标准 CSS 的 @import url(...)。
关键细节：
-
@import (css) "path/to/file.css";✅ 括号与@import之间**不能有空格**：@import (css)对，@import(css)错 - 路径支持相对路径（
"./lib/theme.css"）、绝对路径（"/assets/base.css"），但**不支持协议头**：@import (css) "https://cdn.example.com/style.css"会失败 - **不支持变量插值**：
@import (css) "@{base}/theme.css";会报错，变量必须提前拼好字符串再写死 - 多个
@import (css)语句按顺序生成多个@import url()，浏览器按此顺序加载
别被“css-import 选项”误导
文档里说的 “启用 css-import 选项” 是旧版 Less 的误传。Less 本身没有全局开关；@import (css) 是语法内置行为，跟 CLI 参数（如 { javascriptEnabled: false }）、Webpack 的 less-loader 配置都无关。你在 Webpack 项目里写了它，loader 就会照常输出 @import url()；你在命令行用 lessc 编译，也一样生效。
真正容易忽略的是：如果你混用 @import (css) 和普通 @import（比如先引入一个 CSS，再引入一个 Less 主题文件），Less 仍会按顺序处理——但前者不参与变量、mixin 作用域，后者会。这点在调试样式覆盖顺序时特别关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
