preview.js中import全局css仅对纯css或已编译样式生效；失效主因包括路径错误（如应写../src/style.css而非./src/style.css）、误引未编译scss、@import跨域、引入css modules文件。
直接在 preview.js（或 preview.ts）里 import 全局 CSS 是最简单、最推荐的方案，但只对纯 CSS 或已编译完成的样式文件生效；如果你 import 的是未编译的 .scss、含 @import url() 跨域引用、或 .module.css 文件，它大概率不会注入到预览 iframe 中。
为什么 import '../src/style.css' 在 preview.js 里不生效
失效不是因为写法本身错，而是路径、内容或加载时机不匹配：
- 路径错误：从
.storybook/目录出发，./src/style.css实际指向.storybook/src/style.css，正确应为../src/style.css - 误引未编译 SCSS：比如
import '../src/style/variables.scss'，会触发You may need an appropriate loader to handle this file type报错 - CSS 内部有
@import url('https://...')，被浏览器 CORS 策略拦截，控制台可见 Network failed 或 blocked - 引入了
Button.module.css类文件，这类 CSS Modules 默认只作用于模块内部，不会全局注入到 iframe 的 - 文件内容为空，或全是注释，或规则被更高优先级样式覆盖（比如组件内联
style直接盖掉了 reset）
怎么确认 import 是否真正生效
别看控制台有没有报错，要看样式是否实际注入进预览 iframe 的 DOM：
- 打开任意 Story，在开发者工具中切换到 Elements 面板 → 找到预览区域的
<iframe></iframe>→ 展开它的 - 如果看到对应 CSS 内容以
<style></style>标签形式存在（不是<link rel="stylesheet">），说明已成功注入 - 如果没出现，且无报错，可能是路径对但文件为空，或内容被后续样式覆盖 —— 建议拆成
reset.css+theme.css分开 import，便于定位哪一层挂了
哪些 CSS 可以安全地用 preview.js 导入
只要满足“构建后可用”，就适合走这条路径：
- Tailwind 编译后的产物，如
dist/tailwind.css或src/style/tailwind-output.css - PostCSS 处理过的重置样式（
modern-normalize.css）、主题色定义（theme.css） - 手动编译的 SCSS：
sass --no-source-map --style=compressed src/style/main.scss > dist/main.css - CDN 上的纯 CSS（如
https://cdn.jsdelivr.net/npm/modern-normalize@2.0.0/modern-normalize.css），但需确认项目 CSP 允许
注意：preview.js 的 import 是运行时注入，它不参与构建，也不解析 Sass 变量或 @mixin。如果你的组件样式文件（比如 Button.scss）里写了 color: $primary-color，光靠这里 import 是没用的 —— 那得靠 webpackFinal 配置 additionalData 注入变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
