@import (css) 路径404的根本原因是编译时路径基于.less文件位置解析，而浏览器加载时基于.css文件位置请求，导致路径错位；需配合~前缀和css-loader的importLoaders: 2才能正确解析模块路径。
@import (css) 路径 404 的根本原因
Less 的 @import (css) 不会重写路径，它只是把语句原样输出成 @import url("...")。问题出在：编译时路径按 .less 文件位置解析，而浏览器加载时是按最终生成的 .css 文件位置去请求——两者基准不同，必然 404。
比如 src/styles/main.less 里写 @import (css) "../assets/css/normalize.css"，编译后生成的 dist/css/main.css 就真有这行：@import url("../assets/css/normalize.css")。浏览器于是请求 dist/css/../assets/css/normalize.css → dist/assets/css/normalize.css，但真实文件可能在 dist/static/css/ 下。
别指望构建工具自动修正 @import url() 里的路径。默认情况下，css-loader 根本不处理它。
必须配 importLoaders: 2 才能让 css-loader 接管
css-loader 默认只处理原始 CSS 中的 @import 和 url()，对 less-loader 输出的内容视而不见。要让它往前多解析一层（即处理 less 编译后产生的 @import url()），必须显式设：
立即学习“前端免费学习笔记（深入）”；
use: [{
loader: 'css-loader',
options: {
importLoaders: 2 // ← 关键：1 处理 postcss，2 才能覆盖 less-loader 输出
}
}]这个值不是凭感觉写的：
- importLoaders: 1 只处理原始 CSS 输入
- importLoaders: 2 才能穿透 less-loader 输出的字符串，让别名、alias、publicPath 生效
漏掉这行，~@/styles/reset.css 就永远是字面量，Webpack 不介入。
~ 前缀不是可选的，是模块路径信号
@import (css) "@/styles/reset.css" 必然失败，因为 Less 自己不认识 @，只有 Webpack 的模块系统才认；而 ~ 是告诉 loader “这是模块路径”，缺了它，@ 就只是普通字符串。
- ❌ 错误：
@import (css) "@/styles/reset.css"→ css-loader 当字面量处理，找不到@/目录 - ✅ 正确：
@import (css) "~@/styles/reset.css"→ Webpack 按 alias 映射后传给 less-loader - 如果配置了
less-loader的paths: [path.resolve(__dirname, "src")]，可简写为@import (css) "~styles/reset.css" -
~和引号之间不能有空格：@import (css) ~"xxx"错，@import (css) ~"xxx"对
被引入的 CSS 里含 @import url() 会静默失效
Less 只解析顶层 @import，不会打开你 @import (css) 进来的 CSS 文件再扫描里面的 @import url()。那些语句原封不动输出，由浏览器在运行时加载——但现代浏览器对跨域、CSP、性能限制很严，经常不报错也不加载。
例如 @import (css) "antd.css"，而 antd.css 里有 @import url("https://fonts.googleapis.com/")，这部分完全绕过 Webpack，不受控制，也查不到构建时报错。
真正可靠的解法是拆出来，用 Webpack 显式引入：
- 把字体 URL 单独拎成 import 'https://fonts.googleapis.com/css2?family=...'
- 或把第三方 CSS 用 style-loader + raw-loader 注入，避免嵌套 @import
路径错位和嵌套 @import 静默失败，是两个独立但常被混为一谈的问题。前者靠 ~ + importLoaders 解决，后者必须人工拆解，没有自动方案。
