最常见原因是路径错误或文件类型不匹配：preview.js 以 .storybook 为基准，需用相对路径如 '../src/style/reset.css'；仅支持纯 css 或编译后样式，不支持未编译 scss；css modules 不全局生效；sass 变量必须通过 webpackfinal 配置 sass-loader 注入。
preview.js 中 import 全局 CSS 为什么没生效
最常见原因是路径写错或文件类型不匹配。Storybook 的 preview.js 是从 .storybook/ 目录执行的，所有 import 路径必须以此为基准向上跳转。比如项目结构是 src/style/reset.css，正确写法是 import '../src/style/reset.css'，而不是 ./src/style/reset.css 或 src/style/reset.css。
另外，preview.js 只能加载纯 CSS 或已编译完成的样式（如 Tailwind 构建后的 dist/tailwind.css），不能处理未编译的 .scss 文件——它不是构建上下文，遇到 @mixin 或 $color-primary 会直接报 You may need an appropriate loader 错误。
- 检查浏览器开发者工具 Elements 面板中预览 iframe 的
，确认是否有对应<style></style>标签，而非只看控制台是否报错 - 如果用了
@import url('https://...')，CORS 策略可能拦截，控制台会出现跨域错误 - 引入了
Button.module.css这类文件？CSS Modules 默认不全局注入，import后规则仅作用于模块内部，对 Storybook iframe 无效
哪些 CSS 文件适合直接 import 到 preview.js
只要满足“构建后可用”，就能安全走这条路径。典型可直接 import 的包括：
- 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输出的纯 CSS - CDN 上托管的纯 CSS（如
https://cdn.jsdelivr.net/npm/modern-normalize@2.0.0/modern-normalize.css），但需确认项目无 CSP 限制
这类文件不含变量、mixin、嵌套语法，JS 运行时能直接解析并注入到 iframe 的 中，无需额外 Webpack 配置。
需要 Sass 变量时必须用 webpackFinal 配置
如果你的组件样式里写了 color: $primary-color，光靠 preview.js 的 import 不起作用——Sass 变量必须在构建阶段由 sass-loader 注入。这时得在 .storybook/main.js（或 main.ts）里配 webpackFinal：
const path = require('path');
module.exports = {
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.s[ac]ss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../src'),
options: {
additionalData: `@import "${path.resolve(__dirname, '../src/style/variables.scss')}";`
}
});
return config;
}
};
注意三点：
-
test正则要匹配.scss和.sass（写成/\.scss$/会漏掉.sass） -
additionalData中的路径必须用path.resolve()绝对化，不能用相对路径 - 这个配置只影响组件内
import './Button.scss'的构建过程，和preview.js中的import无关，两者可共存但职责分离
preview.js import 和 webpackFinal 的分工边界
简单说：preview.js 解决“样式呈现”，webpackFinal 解决“样式构建”。前者让所有 Story 共享一套视觉基底（字体、间距、重置规则），后者让组件内的 Sass 文件能用上全局变量和 mixin。
容易混淆的点是：有人试图在 preview.js 里 import '../src/style/variables.scss'，这注定失败；也有人把 webpackFinal 配错了 include 范围，导致只有部分组件能用变量。真正要验证是否生效，得打开一个用了 $primary-color 的组件 Story，检查其编译后的 CSS 是否正确替换了变量值，而不是只看 preview.js 有没有报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
