preview.js中import纯css最简单可靠，但需路径正确（从.storybook出发）、文件为编译后产物；误引scss、css modules、跨域@import或含sass语法均会失效。
直接在 preview.js 里 import 纯 CSS 文件是最简单、最可靠的方式——只要路径对、文件是编译后产物，就能生效；其他方式（比如 import SCSS 或 CSS Modules）基本会失效或报错。
为什么 import '../src/style/index.css' 在 preview.js 中不生效？
不是写法本身有问题，而是环境或内容不匹配：
- 路径没从
.storybook/目录出发：写成./src/style.css或src/style.css都错，必须用../src/style.css - 误引了未编译的
.scss文件：如import '../src/style/variables.scss'会触发You may need an appropriate loader错误——preview.js是 JS 运行时，不处理 Sass 编译 - CSS 文件里含跨域
@import url('https://...')：浏览器 CORS 策略拦截，控制台可见跨域错误，但preview.js不报错 - 引入的是
Button.module.css：CSS Modules 默认只作用于模块内部，不会注入到 Storybook 的预览 iframe 中
哪些 CSS 文件能安全 import 到 preview.js？
核心标准：构建后可用、无变量/mixin/嵌套语法、纯 CSS 字节流。典型可直接用的包括：
- Tailwind 编译产物，例如
dist/tailwind.css或src/style/tailwind-output.css - PostCSS 处理后的重置样式（
reset.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 真正生效？
别只看控制台有没有报错，关键看浏览器开发者工具的 Elements 面板：
- 打开任意 Story，找到预览区域的
<iframe></iframe> - 点开它的
，检查是否存在对应<style></style>标签（内联样式）或<link rel="stylesheet">（外部链接） - 如果没看到，说明没注入；如果看到了但样式没体现，可能是优先级被覆盖（比如组件内联样式盖掉了
reset.css） - 建议拆成
reset.css+theme.css分开import，便于定位哪一层挂了
什么时候必须改 webpackFinal 而不是只靠 preview.js？
只有当你需要 Sass 变量（$primary-color）、mixin 或函数全局可用时才需要——preview.js 的 import 做不到这点：
-
preview.js只负责把已有 CSS 注入 iframe，不参与构建 -
webpackFinal配置中的additionalData才能让所有.scss文件自动前置导入_variables.scss - 两者可共存：一个管“已编译样式注入”，一个管“源码级 Sass 支持”
- 注意
test: /\.scss$/正则必须匹配你实际使用的扩展名（.scss或.sass），且include路径要正确指向源码目录
真正容易被忽略的是：Sass 变量和 preview.js 的 import 属于两个完全不同的生命周期——前者发生在 Webpack 构建阶段，后者发生在 JS 运行时。混用或误判这两者，是绝大多数样式失效问题的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
