在SvelteKit中import第三方CSS需避免./node_modules/路径，应直接import'bootstrap/dist/bootstrap.min.css'；CDN与本地import不可共存；:global()仅用于样式穿透而非引入CSS；按需加载时须同步引入对应样式文件。
在 SvelteKit 入口文件中 import 第三方 CSS 会报错？
直接写 import './node_modules/bootstrap/dist/bootstrap.min.css' 几乎必然失败，Vite 默认不解析带 ./node_modules/ 的相对路径，且路径中若含空格或特殊符号会进一步触发 Module not found 错误。
正确做法是去掉 ./，让模块解析器自动从 node_modules 查找：
-
import 'bootstrap/dist/bootstrap.min.css'—— ✅ 推荐，Vite 原生支持 -
import 'beercss'或import 'beercss/dist/beercss.min.css'—— ✅ 注意查文档确认实际路径（BeerCSS v3.4.1 的正确路径是后者） - 若用 Tailwind，必须配好 PostCSS，否则
@tailwind指令被忽略，import进来的只是空壳
:global() 不是用来引入第三方 CSS 的
:global() 是选择器穿透工具，不是加载机制。写 <style>:global() { @import 'bootstrap'; } 是无效语法，CSS 里不能嵌套 @import 到 :global() 中。
真正需要穿透的，是第三方组件内部结构样式（比如想改 element-plus 的按钮内边距），这时才用：
立即学习“前端免费学习笔记（深入）”；
根据 package.json 中的 engines 字段自动检测 Node.js 版本需求，未安装 nvm 时自动安装并切换至对应版本。支持 Windows、macOS、Linux。适用于 Node.js 项目开发、版本切换和环境配置。
-
.my-wrapper :global(.el-button) { padding: 8px 16px; }—— 仅影响本组件内被.my-wrapper包裹的按钮 - 别写
:global(.el-button)在局部<style>里——它虽能生效，但热更新时易丢、多处定义时覆盖不可控 - 富文本（
{@html}）里的第三方类名，也得靠 wrapper +:global()配合，不能指望它自动“全局化”
CDN 引入和本地 import 同时存在会冲突
HTML 中已加了 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">，又在 src/routes/__layout.svelte 里 import 'bootstrap/dist/bootstrap.min.css'，结果就是规则重复、权重叠加、甚至首屏闪动。
二选一必须严格执行：
- 全走 CDN：删掉所有
import 'xxx.css'，确保app.html的<head>里只有一处 link，且版本锁定（如@5.3.3） - 全走本地打包：移除
app.html中的<link>，只保留import，这样 HMR 和构建提取才可控 - 用 Vite alias 简化路径（可选）：
vite.config.ts中加resolve.alias: { '@css': path.resolve(__dirname, 'src/lib/css') }，之后可写import '@css/bootstrap.css'
按需加载第三方组件时，CSS 很容易漏
只 import { Button } from 'ant-design-vue' 不够，JS 加载了，样式没跟上，按钮就裸奔。不同库约定差异大，路径稍错就 404：
- Element Plus：
import 'element-plus/theme-chalk/button.css'（不是el-button.css，也不是theme目录下） - Ant Design Vue：
import 'ant-design-vue/es/button/style/css'或启用babel-plugin-import并设style: true - Windicss / UnoCSS：它们不依赖传统 CSS 文件，而是通过预处理器生成，
import第三方 CSS 反而可能干扰原子类匹配
最隐蔽的问题是：你以为路径对了，但 tailwind.config.js 的 content 字段没包含 .svelte 后缀，导致 PurgeCSS 把你手动 import 的 utility 类全删了——这时候连 text-red-500 都不显示，别急着骂框架。
