直接在preview.js中import全局CSS仅对纯CSS或已编译样式生效；失效主因包括路径错误（如应写../src/style.css而非./src/style.css）、误引未编译SCSS、@import跨域、引入CSS Modules文件。
直接在 preview.js 里 import 全局 CSS 文件就能生效，但前提是路径对、文件是纯 CSS 或已编译完成的样式 —— 不是所有带 .css 后缀的文件都算“可用”。
为什么 import '../src/style.css' 在 preview.js 里不生效
失效往往不是语法错，而是环境或内容不匹配：
- 路径从
.storybook/目录出发计算，./src/style.css实际找的是.storybook/src/style.css，正确应为../src/style.css - 误引了未编译的
.scss（比如variables.scss），会报You may need an appropriate loader to handle this file type - CSS 文件里写了
@import url('https://cdn.example.com/xxx.css')，被浏览器 CORS 拦截，控制台显示 Network failed - 引入的是
Button.module.css这类 CSS Modules 文件，它默认只作用于模块内部，不会注入到预览 iframe 的<head> - 文件内容为空、全是注释，或规则被更高优先级样式（如组件内联
style）覆盖
哪些 CSS 文件能安全地用 preview.js import
只要满足“构建后可用”，就能直接加载，无需 Webpack 配置：
- Tailwind 编译后的产物，如
dist/tailwind.css或src/style/tailwind-output.css - PostCSS 处理过的重置样式（
modern-normalize.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 允许
这些文件不含 Sass 变量、@mixin 或嵌套语法，JS 运行时可直接解析并注入为 <style> 标签。
立即学习“前端免费学习笔记（深入）”；
怎么确认 import 是否真正生效
别只看控制台有没有报错，要检查样式是否实际注入进预览 iframe：
- 打开任意 Story，右键 → “检查” → 切换到 Elements 面板 → 找到
<iframe>→ 展开它的<head> - 如果看到你 import 的 CSS 内容以
<style>标签形式存在，说明已成功注入 - 如果没出现，且无报错：可能是路径对但文件为空，或规则被后续样式覆盖（建议拆成
reset.css+theme.css分开 import，便于定位哪一层挂了）
真正容易被忽略的是：Sass 变量和 @mixin 完全无法通过 preview.js 的 import 生效 —— 它们必须由 webpackFinal 配置 sass-loader 在构建阶段注入，和 preview.js 是两条独立路径。
