@import (css) "xxx.css"是唯一安全写法,因Less默认将所有.css文件当Less源码解析致词法错误;须无空格、禁变量插值、不支持协议头,推荐改由构建工具统一管理CSS引入。

@import "xxx.css" 会报错,不是路径写错了,是 Less 在错误地尝试解析它。
Less 默认把所有 @import 当作 Less 源码处理
哪怕后缀是 .css,Less 编译器也会打开文件、逐字解析——遇到 @charset、@media、html { margin: 0; } 这类纯 CSS 内容时,立刻触发词法错误,比如:
ParseError: Unexpected character '@'ParseError: Unrecognised inputExpected 1 selector or at-rule
这不是“找不到文件”,而是“找到了,但硬要读,结果读崩了”。
@import (css) 是唯一能绕过解析的写法
加 (css) 修饰符后,Less 才会跳过内容解析,原样输出标准 CSS 的 @import url(...)。但必须满足这些硬性条件:
立即学习“前端免费学习笔记(深入)”;
-
@import和(css)之间不能有空格:@import (css) "a.css"✅,@import(css) "a.css"❌ - 路径只支持相对路径(如
"../css/reset.css")或绝对路径(如"/assets/antd.css"),不支持协议头:@import (css) "https://cdn.com/a.css"会失败 - 不支持变量插值:
@path: "reset.css"; @import (css) "@{path}";直接报错 - Webpack/Vue CLI 中,
@import (css) "@/styles/base.css"无效——@/是构建工具别名,Less 不认识
更推荐的做法:别在 .less 里 import .css
把 CSS 文件从 .less 中彻底移出,改由构建工具统一管理:
- Angular:加到
angular.json的styles数组里 - Vue CLI:在
vue.config.js的css.loaderOptions.less.additionalData外,直接配置css.requireModuleExtension = false并把 CSS 放进css.loaderOptions.css.modules - Webpack:在
module.rules中为.css单独配css-loader + style-loader,不经过less-loader
这样既避免解析冲突,又让加载顺序可控、SourceMap 可靠、缓存策略清晰。
真正难排查的不是报错本身,而是 @import (css) 成功编译后,样式却没生效——那大概率是浏览器加载顺序被 chunk 分割打乱,或者 specificity 被其他 CSS 覆盖了,得去 DevTools 里查 computed styles,而不是继续改 .less 文件。


















