最常见原因是路径未从.storybook目录出发，应写import '../src/style.css'而非./src/style.css或src/style.css；其次为误引未编译SCSS或CSS Modules文件，导致静默失效。
preview.js 中 import '../src/style.css' 为什么没效果
最常见原因是路径没从 .storybook/ 目录出发。比如项目结构是 src/style/reset.css，必须写 import '../src/style/reset.css'，而不是 ./src/style/reset.css 或 src/style/reset.css。Node.js 会按 require.resolve() 规则解析路径，错一级就 404。
另一个静默失效点：文件本身不是纯 CSS。如果 import 的是 variables.scss 或 Button.module.css，浏览器 JS 引擎根本无法解析 $color 或 CSS Modules 的局部作用域逻辑，控制台可能只报 You may need an appropriate loader，但样式不会注入到预览 iframe。
验证是否真生效？打开任意 Story，在开发者工具的 Elements 面板里找到预览区域的 <iframe></iframe>，展开它的 ，确认有没有对应 <style></style> 标签——不是看控制台有没有红字，而是看 DOM 里有没有内容。
哪些 CSS 文件能直接 import 到 preview.js
只要满足“构建后可用”，就能安全走这条路径：
立即学习“前端免费学习笔记（深入）”；
-
dist/tailwind.css（Tailwind 构建产物） -
src/style/reset.css（PostCSS 处理后的重置样式） -
dist/styles.css（用sass --no-source-map --style=compressed src/style/index.scss dist/styles.css手动编译出的纯 CSS） -
https://cdn.jsdelivr.net/npm/modern-normalize@2.0.0/modern-normalize.css（CDN 纯 CSS，但需确认项目无 CSP 限制）
这些文件不含 @mixin、$variable、嵌套语法或 @import url()，JS 运行时可直接读取字符串并注入 iframe 的 。
组件里用了 Sass 变量，光 import CSS 不行
如果你的 Button.scss 里写了 color: $primary-color，那么仅靠 preview.js 导入编译后的 CSS 是无效的——变量在组件构建阶段就必须被解析，而 preview.js 是运行时行为，不参与构建。
这时必须配 webpackFinal，让 sass-loader 在处理每个 .scss 文件前自动注入全局变量：
- 匹配规则要写对：
test: /\.s[ac]ss$/ -
include必须显式指定路径，例如path.resolve(__dirname, '../src')，不能只写../src -
additionalData里用@import引入variables.scss，路径要用绝对路径，且确保该文件本身不依赖其他未编译 SCSS
这个配置和 preview.js 的 import 并行不冲突：前者管组件样式构建，后者管 iframe 全局基底。
怎么确认 Tailwind 或 PostCSS 样式真被 Storybook 识别了
Tailwind 在 Storybook 里失效，90% 是因为 postcss-loader 没插进 SCSS 处理链。默认 Storybook 只用 sass-loader，@apply 会被原样保留，最终生成的 CSS 里根本没有对应规则。
必须在 webpackFinal 里显式插入 postcss-loader，顺序严格为：sass-loader → postcss-loader → css-loader。
另外检查 tailwind.config.js 的 content 数组是否包含 Storybook 文件路径，例如："./storybook/**/*.{js,ts,jsx,tsx}"。JIT 模式只扫描 content 列表里的文件，漏掉 stories 就不会生成响应式类或伪类。
动态类名如 class={`text-${size}-lg`} 也永远不会被 JIT 解析——它只认字面量。演示变体时优先用 args 控制固定组合，比如 text-sm-lg、text-md-lg。
真正容易被忽略的是：Sass 变量、@mixin、@apply、动态 class 插值，这四类东西全都不归 preview.js 管。它们必须在构建阶段由 loader 处理，否则组件里写的任何依赖都会直接报错或静默失效。
