可行，但需确保未启用CSP策略限制style-src且CDN资源可公开访问；应使用完整版本号引入，避免本地@import，优先检查Network面板是否404或CORS被拦。
preview.js 中 import CDN CSS 是否可行
可行，但必须确认项目没启用 CSP 策略限制 style-src，且目标资源可公开访问。比如引入 Modern Normalize：import 'https://cdn.jsdelivr.net/npm/modern-normalize@2.0.0/modern-normalize.css';，只要网络通、CSP 允许，它就会作为 标签注入到预览 iframe 的 中。
常见失效表现不是报错，而是 Elements 面板里完全看不到该 标签——此时优先查 Network 面板是否 404 或被 Blocked: CORS。
- 不要在本地 CSS 文件里用
@import url('https://...')，这种写法由浏览器执行，容易被拦截且无法 debug - CDN 地址建议用完整版本号（如
@2.0.0），避免因上游更新导致样式突变 - 若团队内网环境无法访问外网 CDN，应下载后存入
src/style/vendor/并用相对路径导入
为什么直接 import node_modules 里的 CSS 不总生效
因为路径解析依赖 require.resolve() 行为，而 Storybook 的 preview.js 运行时并不等同于 Webpack 构建上下文。例如 import 'tailwindcss/base.css'; 很可能失败——这不是 Tailwind 问题，而是该路径在 Node.js 模块解析中未命中。
更可靠的做法是显式定位到已构建产物：
- Tailwind：确保
tailwind.config.js的content包含 stories 路径，然后import '../dist/tailwind.css'; - Bootstrap：用官方编译版，
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';（注意两个点开头） - 不推荐
import 'bootstrap/scss/bootstrap.scss'——.scss文件不能被preview.js直接执行
如何验证外部 CSS 是否真正进入预览 iframe
关键不是看控制台有没有报错，而是打开任意 Story 后，在开发者工具的 Elements 面板中定位到预览区域的 ，展开其 ，查找对应 标签的内容是否匹配你引入的规则。
如果标签存在但样式没体现，大概率是优先级问题：重置样式被组件内联样式覆盖，或 CSS 框架类名未生成（如 Tailwind 的 md:flex 因 content 配置漏掉 stories 路径而缺失）。
- 用
getComputedStyle(document.querySelector('button')).display在 Console 中手动检查真实计算值 - 临时加一条
body { border: 2px solid red !important; }到引入的 CSS 末尾，快速验证注入链路是否通畅 - 多个外部 CSS 按需分文件 import，比如先
reset.css再theme.css，便于隔离问题
使用 Next.js 框架时的特别注意事项
如果你用的是 @storybook/nextjs，CSS Modules（如 Button.module.css）默认支持，但外部框架 CSS 仍需走 preview.js 导入——Next.js 框架不接管全局样式注入逻辑。
此时要注意：Next.js 应用层可能已通过 app/layout.tsx 注入了 Tailwind，但 Storybook 预览 iframe 是独立上下文，不会继承这些。
- 不要指望
import 'tailwindcss/globals'这类 Next.js 特有入口在 Storybook 中起作用 - 务必在
.storybook/preview.js中重复导入编译后的 CSS，路径仍以.storybook/为基准 - 若同时用了 CSS-in-JS（如 Emotion），需额外配置 Provider，这和外部 CSS 加载是正交问题，别混在一起排查
真正容易被忽略的是：外部 CSS 框架往往依赖特定 HTML 结构（比如 Bootstrap 要求 ）或 JS 初始化（如某些 UI 库的 tooltip 自动绑定）。preview.js 只管样式注入，这类行为必须另外在 preview.js 中补全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
