直接在preview.js中import编译后的纯CSS文件即可生效，但路径必须从.storybook目录出发（如../src/style/reset.css），且文件须为不含Sass语法、@import url()或CSS Modules的纯CSS；否则会静默失效或报“You may need an appropriate loader”错误。
直接在 preview.js 中 import 编译后的纯 CSS 文件就能生效，但前提是路径从 .storybook/ 目录出发、文件不含 Sass 语法、且未混用 CSS Modules。
为什么 import '../src/style/reset.css' 没反应？
不是代码写错了，而是环境没对上：
-
../src/style/reset.css是正确路径；./src/style/reset.css会去找.storybook/src/下的文件，必报 404 - 文件实际是
reset.scss或variables.scss？浏览器无法解析$color-primary或@mixin，控制台报You may need an appropriate loader - CSS 文件里写了
@import url('https://cdn.example.com/theme.css')？跨域请求被拦截，Network 面板显示Blocked: CORS，但控制台可能静默失败 - 误 import 了
Button.module.css？CSS Modules 默认只作用于模块内，不会注入到预览 iframe 的<head>
哪些 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，然后import '../dist/main.css' - CDN 纯 CSS，如
https://cdn.jsdelivr.net/npm/modern-normalize@2.0.0/modern-normalize.css，但需确认项目无 CSP 限制
关键检查点：打开编译后的 CSS 文件，确认里面没有 @mixin、$ 变量、@import url() —— 这些都会导致静默失效或报错。
立即学习“前端免费学习笔记（深入）”；
怎么确认 import 是否真正起效？
别看控制台有没有报错，要看预览 iframe 的 DOM 结构：
- 打开任意 Story，用浏览器开发者工具切到 Elements 面板
- 找到预览区域的
<iframe>，展开它的<head> - 搜索是否有对应
<style>标签，内容是否匹配你 import 的 CSS 规则 - 如果没出现，说明路径或文件类型有问题；如果出现了但样式没体现，大概率是优先级被组件内联样式覆盖（比如
style={{ color: 'red' }}）
需要 Sass 变量或 @mixin 怎么办？
preview.js 的 import 完全不处理变量和 mixin —— 它们必须由 Webpack 在构建阶段注入。这时候得配 webpackFinal：
- 在
.storybook/main.js中添加sass-loader的additionalData - 显式
path.resolve(__dirname, '../src/style/variables.scss')，不能只写相对路径 - 匹配规则要写准：
test: /\.s[ac]ss$/，否则 loader 不触发 - 这个配置和
preview.js的import并行不冲突：前者管组件样式构建，后者管 iframe 全局样式注入
最容易被忽略的一点：Sass 变量和最终渲染的 CSS 规则是两件事。你可以在 preview.js 里 import 一堆编译好的 CSS，但如果组件里写了 color: $primary，没配 webpackFinal 就一定会报错 —— 它们根本不在一个处理流程里。
