浏览器原生解析css中@import路径，不识别node_modules，直接请求不存在的url导致404且静默失败；less中引入npm包必须加~前缀触发webpack模块解析，否则按相对路径查找必然失败。
CSS 文件里直接 @import npm 包路径，根本不会被构建工具处理——浏览器不认 node_modules，Webpack/Vite 也不管它。
为什么浏览器打开就 404，连错误都不报
浏览器原生只按当前 CSS 文件所在位置解析 @import 路径。写 @import "node_modules/normalize.css/normalize.css"，它真会去请求 http://localhost:3000/node_modules/normalize.css/normalize.css，而这个路径在开发服务器上根本不存在。更糟的是，现代浏览器对跨域或非法路径的 @import 往往静默失败，不抛错、不提示，只留空白样式。
- 不是构建阶段出错，是运行时加载失败
- 所有
@import写在 .css 文件里，都走这条原生路径逻辑，less-loader或css-loader完全不介入 - 哪怕你配了 Webpack 的
resolve.alias，CSS 文件里的@import也完全无视它
Less 文件里用 @import 引 npm 包，为什么还是找不到
Less 编译器本身不理解 node_modules，也不走 Webpack 模块解析链路。写 @import "antd/less/variables.less"，它默认从当前 .less 文件目录开始找，不是从 node_modules 开始。
- 必须加
~前缀：@import "~antd/less/variables.less"，这才会触发 Webpack 的模块解析 -
~和引号之间不能有空格：@import ~"antd/..."错，@import ~"antd/..."对 - 如果用了
less-loader@7+，还要确认lessOptions里没漏掉javascriptEnabled: true（Ant Design 等库的 Less 文件依赖它） - 路径必须是纯 ASCII：含中文、空格、全角符号的路径会直接触发
ParseError: Unrecognised input
package.json 里的 style 字段有用吗
没用。Webpack、Vite、Rollup 全都不读这个字段。它只是给 CDN（如 jsDelivr）看的 fallback 规则，对本地构建零影响。
- 真正起作用的是
exports字段，且必须显式导出 CSS 路径，例如："./style.css": "./dist/style.css" - 检查
node_modules/xxx/dist/下是否真实存在你要import的文件，别只信文档写的路径 - 想可靠引入第三方 CSS，唯一方式是 JS/TS 入口里
import 'xxx/dist/style.css'，让 loader 链路完整跑通
最常被忽略的一点：路径基准永远以文件位置为准，不是以你“觉得应该在哪”为准。@import 在 src/styles/index.less 里，就从 src/styles/ 开始解析；加了 ~ 才跳转到 node_modules。少一个 ~，多一个中文字符，或者 importLoaders 没设对，都会让路径看起来“对”，实际却失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
