直接在CSS文件里写@import引入node_modules样式99%不生效，因浏览器原生不识别node_modules路径，且Vite/Webpack等打包器默认不解析CSS中的跨包@import；唯一可靠方式是在JS/TS入口中用import语句引入，才能触发loader链路完整处理。
直接在 CSS 文件里写 @import 引入 node_modules 中的样式，99% 不生效——这不是你代码写错了，而是构建链路根本没走通。
为什么 @import 在 CSS 里引入 npm 包会失败
浏览器原生不识别 node_modules 路径；Vite、Webpack、esbuild 等打包器默认也不解析 CSS 文件里的跨包 @import。哪怕你写了：
@import "node_modules/normalize.css/normalize.css";
构建后照样 404 或静默忽略。真正起作用的，只有 JS/TS 入口文件中的 import 语句，它才能触发 loader（如 css-loader）完整介入。
常见错误现象包括：样式完全不出现、热更新（HMR）不触发、控制台无报错但页面空白。
立即学习“前端免费学习笔记（深入）”；
-
package.json里的style字段对构建流程零作用，只在 CDN 场景（如 jsDelivr）下 fallback 用 - 真正关键的是
exports字段是否导出了 CSS 路径，比如"./style.css": "./dist/style.css" - 用
ls node_modules/xxx/dist/实际确认目标 CSS 文件是否存在，别只信文档写的路径
正确做法：在 JS/TS 入口中 import CSS
这是唯一可靠、可调试、支持 HMR 的方式。以 Vite 或 CRA 项目为例，在 main.ts 或 index.js 顶部加一行：
import 'remixicon/fonts/remixicon.css';
或引入设计系统：
import '@picocss/pico/css/pico.min.css';
使用场景包括图标库、CSS 重置、原子化工具类等。注意顺序：
- reset/normalize 类包（如
modern-normalize）必须放在所有自定义样式 之前，否则重置规则会被覆盖 - 若项目已存在大量未适配样式，慎用强重置（如
ericmeyer-reset），优先选渐进式方案 - Vite 用户可启用
server.hmr.overlay = true，让模块解析失败直接弹窗，避免黑盒排查
Webpack 项目额外要检查三件事
即使写了 import，Webpack 下仍可能白屏，因为链路更长：
- 确认已安装并配置
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 入口
CDN 引入和 npm 引入的本质区别
CDN 是纯 HTML 层加载，绕过构建流程；npm 引入本质是模块依赖，依赖打包器解析、loader 处理、HMR 响应。
CDN 适合原型或静态页，但无法做 Tree Shaking、主题变量定制、或与 SCSS/Less 混合编译。而 npm 引入虽然多一步 import，但后续所有能力（按需、变量覆盖、局部作用域）都建立在这个基础上。
最容易被忽略的一点：很多包（如 Bootstrap 5）的“按需”不是靠 import 路径控制的，而是必须走 Sass 编译流程——import 'bootstrap/dist/css/bootstrap.min.css' 永远是全量，这点和图标库完全不同。
