必须用@import (css)显式跳过解析，否则less默认将.css文件当less源码处理，遇calc()、url()等语法必报parseerror；(css)需紧贴@import、不支持变量插值、协议头可直写但推荐本地相对路径。
第三方CSS模块不能直接@import "xxx.css"
Less默认把.css后缀当Less源码解析，遇到calc()、斜杠分隔的url()或未引号路径就会报ParseError: Unexpected input。这不是路径错，是解析行为本身导致的——哪怕文件真实存在、路径完全正确，也必挂。
必须用@import (css)显式跳过解析：
@import (css) "./node_modules/normalize.css/normalize.css"; @import (css) "https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css";
注意：(css)必须紧贴@import，中间不能有空格；不支持变量插值（@import (css) "@{cdn}/xxx.css"会失败）；协议头（https://）可直接写，但本地相对路径更可控。
@import (css) 和 @import (less) 的关键区别
@import (css)原样输出@import url(...)到最终CSS，由浏览器加载；@import (less)强制把.css文件当Less处理（比如含@variable或.mixin的定制版CSS），但要求文件内容语法合法。
- 用
(css)：引入标准第三方CSS（Bootstrap CSS、Pico、Normalize），不改动、不编译 - 用
(less)：引入你魔改过的xxx.css（比如加了@primary-color变量），且确认它不含非法语法 - 混用风险：同一项目里既有
(css)又有(less)导入同名文件，构建工具可能缓存冲突
如何让第三方CSS模块参与主题切换
纯@import (css)无法响应Less变量，所以主题色、断点等无法动态覆盖。要让它“活”起来，得走两步：
- 先用
@import (css)引入原始CSS（保证基础样式不崩） - 再在项目级
overrides.less中，用CSS自定义属性桥接Less变量：:root { --primary-color: @color-primary; } - 第三方CSS需已适配
var(--primary-color)（如Pico、Shoelace支持；Ant Design 5+也逐步迁移）
别试图用@import (less)强行注入变量——多数第三方CSS没做作用域隔离，@primary-color一覆盖，整个库的边框、阴影、文字全变，失控风险极高。
Webpack/Vite中避免路径爆炸的实操配置
直接写@import (css) "../../node_modules/xxx/dist/xxx.css"不可维护，且嵌套层级一深就Cannot find module。正确做法是统一收口到构建配置：
- Webpack（
less-loader）：lessOptions.paths加入node_modules根目录，之后可写@import (css) "antd/dist/reset.css" - Vite（
lessOptions.paths）：同样加resolve(__dirname, 'node_modules')，但注意它是数组，多个路径要全列 - 禁用
~别名用于(css)：原生Less不识别~，lesscCLI直接报错；只有less-loader支持，且仅对.less有效
最易被忽略的一点：第三方CSS模块的@import url()链路（比如normalize.css内部又@import了别的CSS）仍由浏览器执行，不受Less控制——这意味着CDN稳定性、CORS策略、缓存失效都得自己兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
