preview.js中import CSS仅对纯CSS或已编译样式生效；不生效主因包括路径错误（如应写../src/style.css而非./src/style.css）、误引未编译SCSS、@import跨域、引入CSS Modules文件。
在 preview.js 里 import CSS 文件为什么有时不生效
直接在 preview.js（或 preview.ts）中 import 全局 CSS 是最轻量、最推荐的引入方式，但它只对纯 CSS 或已编译完成的样式文件有效。常见失效原因包括：
- 路径写错：比如从
.storybook/目录出发，却用了./src/style.css（应为../src/style.css） - 误 import 了未编译的
.scss文件，例如import '../src/style/variables.scss'—— 这会触发You may need an appropriate loader to handle this file type报错 - CSS 文件内部含
@import url(...)，且目标资源跨域或路径不可达 - 引入了
xxx.module.css，这类文件默认启用 CSS Modules，不会全局注入
怎么确认 preview.js 中的 import 是否真正生效
关键看浏览器开发者工具的 Elements 面板里，<iframe></iframe>（Storybook 预览区）的 中是否出现了对应 <style></style> 或 <link> 标签。不是看控制台有没有报错，而是看样式是否实际注入到预览 iframe 的 DOM 中。
- 生效表现：打开任意 Story，检查预览 iframe 的
，能看到你 import 的 CSS 内容以<style></style>标签形式存在 - 不生效但无报错：可能是路径正确但文件为空、或内容被 CSS 规则优先级覆盖（比如重置样式没生效，其实是被后续组件内联样式盖掉了）
- 建议搭配
reset.css+theme.css分开 import，便于定位哪一层挂了
preview.js 导入 CSS 和 webpackFinal 配置的区别在哪
preview.js 的 import 是运行时注入，走的是 JS 执行流；而 webpackFinal 是构建时介入，影响整个打包流程。两者适用场景完全不同：
- 只需要让所有 Story 共享一套视觉基底（如重置、字体、颜色变量导出后的 CSS）→ 用
preview.jsimport，简单、快、不污染构建配置 - 需要 Sass 变量、
@mixin、嵌套语法被所有组件样式文件自动识别 → 必须走webpackFinal配置sass-loader的additionalData，否则Button.style.scss里写color: $primary-color会报错 - 混用风险：如果同时在
preview.jsimport 了未编译的 SCSS，又没配webpackFinal，构建直接失败
为什么不能把 Tailwind 的 CSS 直接 import 到 preview.js
可以，而且推荐——但前提是它已经是编译后的结果。比如 tailwindcss/tailwind.css 是官方发布的纯 CSS 包，import 'tailwindcss/tailwind.css' 完全没问题；但如果你 import 的是项目根目录下的 src/index.scss，而它依赖 @tailwind base 等指令，那就必须靠 webpackFinal + postcss-loader + tailwindcss 插件链来处理。
- Tailwind 的
@layer、@apply、@screen等都是 PostCSS 插件阶段才解析的，JS 运行时无法识别 - 常见错误：在
preview.js里 import../src/tailwind.scss，却忘了在main.js中启用@storybook/addon-postcss或自定义 Webpack rule - 稳妥做法：先用
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch编译出一份静态 CSS，再 import 进preview.js
真正容易被忽略的点是：preview.js 的 import 只解决“样式是否加载”，不解决“样式是否可复用”。变量、函数、mixin 这类能力，永远要回到构建层去补全，而不是靠 JS runtime 去 hack。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
