Less的@import (css)导致路径404，因其按.less文件位置解析路径，而浏览器按编译后.css文件位置请求资源，基准不一致；需用~前缀配合Webpack alias或less-loader paths配置，并设css-loader importLoaders: 2。
@import (css) 路径解析不等于浏览器加载路径
Less 的 @import (css) 不会重写路径，它只是把语句原样输出成 CSS 的 @import url(...)。问题出在：Less 编译时按 .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向前多解析一层（即处理less-loader输出的@import） - 路径写法必须和
.less文件所在位置严格对齐，不能靠猜
Webpack 中 ~ 别名不生效的真正原因
@import (css) "@/styles/reset.css" 报错，不是 Less 不支持 @，而是 Webpack 根本没介入——Less 自己不认识 @ 别名，只有 Webpack 的模块系统才认；而 ~ 是告诉 loader “这是模块路径”，缺了它，@ 就只是普通字符串。
正确写法必须带 ~ 前缀：@import (css) "~@/styles/reset.css"。否则 css-loader 直接当字面量处理，找不到 @/ 目录。
立即学习“前端免费学习笔记（深入）”；
- 如果用了
less-loader的paths配置（如paths: [path.resolve(__dirname, "src")]），可简写为@import (css) "~styles/reset.css" -
~和引号之间不能有空格：@import (css) ~"xxx"错，@import (css) ~"xxx"对 -
less-loader 7+默认javascriptEnabled: false，不要手动开它——开了反而和(css)冲突，有安全风险
被引入的 CSS 里含 @import url() 为何静默失败
Less 只解析顶层 @import，不会打开你 @import (css) 进来的 CSS 文件再扫描里面的 @import url()。那些语句原封不动输出，由浏览器在运行时加载——但现代浏览器对跨域、CSP、性能限制很严，经常不报错也不加载。
例如 @import (css) "antd.css"，而 antd.css 里有 @import url("https://fonts.googleapis.com/...")，这部分完全绕过 Webpack，不受控制，也查不到构建时报错。
- 不要依赖外部 CSS 文件内部的
@import，把它拆出来，用 Webpack 显式引入 - 字体等 URL 资源，改用
@import url(~"https://...")，~必须紧贴引号，且不能拼接变量 - 若必须保留原有 CSS 文件结构，建议改用
postcss-import替代 Less 原生@import，它能统一解析混合依赖
路径写错时最该先看 Network 面板里的 Request URL
别急着改代码，先打开浏览器开发者工具，切到 Network，刷新页面，找到那个 404 的 CSS 请求，点开看 Request URL。这个地址就是浏览器实际发出的请求路径，它比任何“我以为的路径”都准。
对比这个 URL 和你项目中真实文件的位置，差几级就补几个 ../ 或删几个，而不是反复试 ../../ 猜。
- 本地开发建议用
http://localhost而非file://协议测试，后者路径行为异常 - 部署后路径结构变化，根路径
/指向的是服务器域名根目录，不是你本地src/ -
less-loader的paths只影响 Less 解析阶段，不影响最终 CSS 里url()的运行时路径——那是构建工具（如css-loader）的事
