@import 在 css 文件中引入 npm 包样式会失败，是因为浏览器原生不支持解析 node_modules 路径，且 vite、webpack、esbuild 等现代打包器默认不处理跨 node_modules 的 css @import（尤其未配置 ~ 别名时），必须通过 js/ts 入口文件 import 才能触发 loader 链路正确解析。
import 语句是唯一可靠的方式，@import 在 CSS 文件里写 node_modules 路径基本无效，style 字段在 package.json 中对构建流程零作用。
为什么 @import 在 CSS 文件里引入 npm 包样式会失败？
浏览器原生不支持解析 node_modules 路径；Vite、Webpack、esbuild 等现代打包器默认也不处理跨 node_modules 的 CSS @import（尤其没配 ~ 别名时）。即使写了：@import "node_modules/normalize.css/normalize.css";
构建后照样 404 或静默忽略。
- 真正生效的路径必须由 JS/TS 入口文件触发，让打包器走 loader 链路（如
css-loader） - 若用 Sass/Less，需确认 loader 支持
~别名，否则@import "~normalize.css/normalize.css";也会失败 - Vite 用户可开
server.hmr.overlay = true，让模块解析错误直接弹窗，避免黑盒排查
package.json 里的 style 字段到底有没有用？
没有用。npm 官方不读它，Webpack/Vite/Rollup 全都不识别。它只是社区约定，仅对 CDN（如 unpkg、jsDelivr）有意义——这些服务 fallback 时会去找这个字段指定的路径。
- 真正起作用的是
exports字段：必须显式导出 CSS 路径，例如："./style.css": "./dist/style.css" - 如果包没声明
exports或main指向 CSS，import 'xxx/style.css'就会 404 - 检查
node_modules/xxx/dist/下真实存在目标 CSS 文件，别只信文档写的路径
Webpack 项目中引入第三方 CSS 后没生效？先查这三件事
不是代码写错，而是构建链路断在了中间环节。
- 确认已装
css-loader和style-loader（或mini-css-extract-plugin），Webpack 默认不处理 CSS - 检查项目根目录
package.json的sideEffects字段：如果设为false，CSS 会被摇树剔除，必须显式放行："sideEffects": ["*.css", "*.scss"] - Nuxt 用户别只往
css: []里填字符串——得确保该包已npm install，且其package.json有main或exports指向 CSS 入口，否则css: ['bulma']会静默失败
CDN 引入和 npm 引入的本质区别在哪？
CDN 是纯 HTML 层加载，绕过构建流程；npm 引入本质是模块依赖，依赖打包器解析、loader 处理、HMR 响应。
- CDN 适合原型或静态页，但无法做 Tree Shaking、主题变量定制、或与 SCSS/Less 混合编译
- npm 方式必须走 JS 入口
import，哪怕你用的是纯 CSS 库（如@picocss/pico），也得写import '@picocss/pico/css/pico.min.css'; - 某些包（如
@primer/primitives）只提供 SCSS 源码，没预编译.css，直接import对应路径会 404 —— 得先确认它是否真导出了可加载的 CSS 文件
exports 没导出、sideEffects 把 CSS 删了，或者你以为有 .css 文件，其实只有 .scss。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
