✅生效：只要路径正确且文件为纯CSS或已编译的SCSS/CSS，preview.js中import全局CSS即可被Storybook预览iframe加载；❌不生效常见原因包括路径错误、语法错误、跨域@import及CSS Modules。
直接在 preview.js（或 preview.ts）里用 import 引入全局 CSS 文件，是最简单、最可靠的方式——它不依赖 Webpack 配置改动，也不需要额外 loader，适用于绝大多数 Storybook 项目（v6.5+ 到 v9.x）。
但要注意：这种方式只注入 CSS 规则，不支持 Sass 变量、mixin 或嵌套语法。如果项目依赖 _variables.scss 这类文件，光靠 import 是无效的。
preview.js 中 import 全局 CSS 是否生效？
- ✅ 生效：只要路径正确、文件是纯 CSS 或已编译的 SCSS/CSS，就能被 Storybook 的预览 iframe 加载
- ❌ 不生效常见原因：
- 路径写错，比如用了相对路径但没从
.storybook目录出发（应使用../src/style/index.css） - 文件本身有语法错误（如未编译的
.scss写进了import） - CSS 文件里用了
@import url(...)且目标资源跨域或路径不可达 - 使用了 CSS Modules（
xxx.module.css），这类文件默认不会全局注入
- 路径写错，比如用了相对路径但没从
示例正确写法：
import '../src/style/reset.css'; import '../src/style/theme.css';
为什么不能在 preview.js 里 import Sass 文件？
-
preview.js是 JS 运行时上下文，不是样式构建上下文 -
import '../src/style/variables.scss'会报错：You may need an appropriate loader to handle this file type - Sass 必须由
sass-loader在 Webpack 构建阶段处理，JS 文件无法“执行” Sass 逻辑
所以：
立即学习“前端免费学习笔记（深入）”；
- 全局变量、mixin、函数 → 必须走
webpackFinal配置里的additionalData - 已编译的 CSS（含 Tailwind、PostCSS 输出）→ 直接
import到preview.js最省事
webpackFinal 配置中如何安全注入 Sass 全局变量？
这是唯一能真正让所有组件故事自动获得 $primary-color 等变量的方式。关键点：
- 必须匹配正确的
test正则（如/.s[ac]ss$/） -
additionalData字符串里用反引号包裹@import，且路径需用path.resolve绝对化 - 不要重复添加 rule（检查是否已有
scssrule，避免冲突）
推荐写法（.storybook/main.js）：
const path = require('path');
module.exports = {
// ...其他配置
webpackFinal: async (config) => {
config.module.rules.forEach(rule => {
if (rule.test && rule.test.toString().includes('scss')) {
rule.use.forEach(loader => {
if (loader.loader?.includes('sass-loader')) {
loader.options = {
...loader.options,
additionalData: `@import "${path.resolve(__dirname, '../src/style/variables.scss')}";`,
};
}
});
}
});
return config;
},
};容易踩的坑：
- 把
additionalData错配到css-loader上（无效） - 路径用了
@/别名但没配 alias（应改用path.resolve） - 多个
sass-loader实例导致变量被覆盖或丢失
真正麻烦的从来不是“加一行 import”，而是搞清你加的到底是「运行时样式」还是「构建时上下文」。前者看 preview.js，后者必须动 webpackFinal —— 混用就白忙活。
