@import (css) 并非内联css，而是强制less原样输出@import url()语句；真正内联需用@import (inline)，但不解析语法且路径须为相对或带~前缀。
@import (css) 是唯一能“内联”CSS的写法，但实际它根本不内联
Less 的 @import 默认行为是**文本拼接**，但仅限于 .less 文件；遇到 .css 文件时，它不会解析内容，也不会内联——而是直接原样输出 @import url(...) 到最终 CSS 中。所谓“无法内联”，本质是你误以为它该内联，而它压根没这个设计。
常见错误现象：
-
@import "normalize.css";报ParseError: Unexpected character '@'—— Less 在尝试编译 CSS 内容 -
@import "@/styles/reset.css";静默失败或 404 ——@/别名不被 Less 解析，路径字面量找不到文件 - 最终生成的 CSS 里出现
@import url("../assets/css/reset.css");，但浏览器加载失败 —— 路径基准错位（.less 文件位置 vs .css 输出位置）
@import (css) 路径必须带 ~ 才能被构建工具识别
@import (css) 只是告诉 Less “跳过编译”，但不解决“路径怎么找”的问题。Webpack/Vite 的别名（如 @/）只在 JS 层生效，Less 编译阶段已退出作用域，所以 @import (css) "@/xxx.css" 会被当纯字符串处理，必然 404。
正确做法是加 ~ 前缀，触发模块解析：
-
@import (css) "~@/assets/css/normalize.css";✅ -
@import (css) "~normalize.css/normalize.css";✅（需配置less-loader的paths指向node_modules） -
@import (css) "../assets/css/normalize.css";✅（纯相对路径，最稳妥） -
@import (css) "@/assets/css/normalize.css";❌ 不识别别名，404
css-loader 的 importLoaders 必须设为 2 才能重写 @import url()
即使 @import (css) 正确输出了 @import url(...)，浏览器仍可能加载失败——因为现代构建链中，css-loader 默认只处理 .css 文件里的 @import，对 Less 输出的 @import url() 视而不见。
Webpack 配置必须显式启用：
-
css-loader的importLoaders: 2：表示向前穿透两层 loader（即 less-loader → css-loader），让 css-loader 也能处理 Less 输出的@import url() - 若链路含 postcss-loader（如 autoprefixer），
importLoaders至少为 2，否则路径不会被重写、CDN 或别名路径依旧 404 - Vite 用户不用配这个，它的 CSS 插件默认接管所有
@import url()并做路径重写
真正“内联”CSS 只有 inline 模式，但它不解析 Less 语法
如果真要内容内联（即把 CSS 文本直接塞进最终 CSS 文件），只能用 @import (inline)。但它和 @import (css) 完全不同：
-
@import (inline) "reset.css";→ 把文件内容原样插入，不经过任何解析 - 插入后的内容若含嵌套规则（如
&:hover）、变量（@color）或 mixin 调用，会直接报错 - 它不走模块解析，所以
@import (inline) "@/xxx.css"同样失败，必须用相对路径或~前缀 - 适合调试或引入极简纯 CSS 片段，不适合常规 CSS 库
最容易被忽略的一点：Less 从不“内联”第三方 CSS —— 它要么编译（失败），要么转发（@import url()），要么硬塞（(inline)）。所谓“内联需求”，往往暴露的是对构建流程层级的误判：CSS 应由构建工具统一管理，而不是靠 Less 去吞并。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
