preview.js中import纯css生效的前提是路径正确且文件已编译；失效主因包括路径未以.storybook为基准（应写../src/style/reset.css）、误引未编译scss、含跨域@import或引入css modules文件。
直接在 preview.js 中 import 纯 CSS 文件是最简单、最可靠的方式，前提是路径正确且文件已编译完成。
为什么 import '../src/style/reset.css' 没生效？
常见失效不是代码写错，而是环境或内容不匹配：
- 路径没从
.storybook/目录出发：应写../src/style/reset.css，不能写./src/style/reset.css或src/style/reset.css - 误引入未编译的
.scss文件（如variables.scss），JS 运行时无法解析$color-primary或@mixin，报错You may need an appropriate loader - CSS 文件内部含跨域
@import url('https://...')，浏览器拦截，控制台出现 CORS 错误 - 引入了
Button.module.css—— CSS Modules 默认只作用于模块内，不会注入到 Storybook 预览 iframe 的
哪些 CSS 文件能安全 import 到 preview.js？
只要满足“构建后可用”，就能直接加载：
- 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 限制
怎么确认 import 是否真正生效？
关键不是看控制台有没有报错，而是检查预览 iframe 的 DOM 结构：
- 打开任意 Story，在浏览器开发者工具中切换到 Elements 面板
- 定位到预览区域的
<iframe></iframe>，展开其 - 查找是否有对应
<style></style>标签，内容是否为你 import 的 CSS 规则 - 如果没出现，说明路径或文件类型有问题；如果出现了但样式没起作用，可能是优先级被组件内联样式覆盖
最容易被忽略的一点：Sass 变量、@mixin、嵌套语法这些，preview.js 的 import 完全不处理——它们必须靠 webpackFinal 配置 sass-loader 注入，否则组件里写 color: $primary 会直接报错。别指望一个 import 同时搞定变量和样式规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
