如何在Less中引用外部原生的CSS文件而不被预处理器编译？-css教程-PHP中文网

@import (css) 是唯一可靠方式，因 less 默认将所有 @import 当作 less 源码解析导致报错；必须无空格、仅支持相对/绝对路径、不支持变量插值和协议头；webpack 中需配置 paths 或用相对路径；less 不递归解析 css 中的 @import。

如何在less中引用外部原生的css文件而不被预处理器编译？

@import (css) 是唯一可靠的方式，其他写法在构建流程中大概率失效或行为不一致。

为什么直接 @import "xxx.css" 会报错

Less 默认把所有 @import 当作 Less 源码处理，哪怕后缀是 .css。它会尝试解析注释里的 /、url() 中未引号的路径、calc() 里的斜杠等，结果常抛出 ParseError: Unexpected input 或 Invalid CSS after ""。这不是路径写错，是解析动作本身导致的。

常见错误现象包括：

@import "normalize.css"; → 报 Missing closing ')'
@import "./node_modules/antd/dist/reset.css"; → 报 Expected 1 selector or at-rule

@import (css) 的正确写法与限制

这是 Less 内置的语法级指令，强制跳过解析，原样输出为标准 CSS 的 @import url()。

必须注意以下几点：

@import 和 (css) 之间不能有空格：@import(css) "a.css"; 无效，@import (css) "a.css"; 才有效
路径只支持相对路径、绝对路径（如 /assets/css/base.css），不支持协议头：@import (css) "https://cdn.com/style.css"; 会失败
不支持变量插值：@path: "base.css"; @import (css) "@{path}"; 会报错
多个 @import (css) 会按顺序生成多个 @import url()，浏览器同步加载

Webpack + less-loader 下路径解析失效怎么办

less-loader 默认不识别 Webpack 的 resolve.alias（比如 @/），所以 @import (css) "@/assets/css/antd.css"; 必然失败。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

可行方案有两个：

改用相对路径：@import (css) "../assets/css/antd.css";
在 less-loader 配置中加 paths，例如：paths: [path.resolve(__dirname, "src")] ，然后写 @import (css) "~assets/css/antd.css";（注意 ~ 前缀需配合 paths）

别碰 javascriptEnabled: true——该选项有安全风险，且与 (css) 指令冲突，容易让 @import (css) 表现异常。