在Storybook中import '../src/style.css'才有效，因preview.js路径基准是.storybook/目录；仅纯CSS或已编译产物可被导入，SCSS变量或CSS Modules会静默失效。
直接在 preview.js 里 import 就行，但必须满足两个硬条件：路径从 .storybook/ 出发、文件是纯 CSS 或已编译产物。
为什么 import './src/style.css' 没效果？
Node.js 解析路径时，preview.js 的执行基准是 .storybook/ 目录，不是项目根目录。写 ./src/style.css 是让 Node 去 .storybook/src/ 找，显然不存在。
- 正确写法是
import '../src/style.css'（向上跳出一级到项目根） - 错误写法包括：
./src/style.css、src/style.css、/src/style.css - 验证方式：在终端运行
node -e "console.log(require.resolve('../src/style.css'))"，看是否能打印出绝对路径
哪些 CSS 文件能直接 import 到 preview.js？
只有构建后可用的纯 CSS 才行。Sass 变量、@mixin、嵌套语法、未解析的 @import url() 都会导致静默失败或报错。
- ✅ 安全可 import：
dist/tailwind.css、src/style/reset.css（PostCSS 处理完）、https://cdn.jsdelivr.net/npm/modern-normalize@2.0.0/modern-normalize.css - ❌ 绝对不行：
src/style/variables.scss（报You may need an appropriate loader）、Button.module.css（CSS Modules 不全局注入） - ⚠️ 看似正常但无效：
src/style/index.scss里含@import 'variables.scss'—— JS 运行时不处理 Sass 构建逻辑
怎么确认样式真进了预览 iframe？
别只盯控制台有没有红字。打开任意 Story，在开发者工具的 Elements 面板里定位到预览区域的 <iframe></iframe>，展开它的 ，找有没有对应内容的 <style></style> 标签。
立即学习“前端免费学习笔记（深入）”；
- 有
<style>body{margin:0}</style>→ 成功 - 没标签，或标签内容为空 → 路径错、文件空、CSP 拦截（尤其 CDN 地址）
- 有标签但样式不生效 → 优先级被组件内联样式覆盖，不是引入失败
用了 Sass 变量怎么办？
preview.js 的 import 解决不了。变量必须在组件样式构建阶段被解析，而 preview.js 是运行时行为。
- 必须配
webpackFinal，用sass-loader的additionalData注入@import - 关键点：正则匹配
/\.s[ac]ss$/、include显式指定路径（如path.resolve(__dirname, '../src')）、additionalData里用绝对路径@import ".../variables.scss" - 这个配置和
preview.js的import并行不冲突：前者管组件样式构建，后者管 iframe 全局基底
最常被忽略的是：以为 import 了 variables.scss 就万事大吉，其实它根本不会被解析；还有人把重置样式和主题色混在一个文件里，结果变量部分失效，基底部分生效，排查起来特别绕。
