✅生效：路径正确且为纯CSS或已编译SCSS时，preview.js中import可被Storybook预览iframe加载；❌不生效主因包括路径未从.storybook目录出发、误引未编译SCSS、跨域@import及CSS Modules文件。
直接在 preview.js 里 import 全局 CSS 文件就能生效，前提是路径对、文件是纯 CSS 或已编译的 SCSS 输出（比如 Tailwind 构建后的 styles.css）。
为什么 import '../src/style/index.css' 有时不生效？
常见失效不是因为写法错，而是环境或内容本身不匹配：
- 路径用了相对路径但没从
.storybook/目录出发，正确应为../src/style/reset.css（不能写成./src/...或src/...） - 误把未编译的
.scss文件（含$color-primary变量或@mixin）直接import进preview.js—— JS 运行时无法解析 Sass 语法，会报You may need an appropriate loader - CSS 文件里写了跨域
@import url('https://...')，浏览器策略拦截，控制台可见CORS错误 - 文件实际是
Button.module.css，这类 CSS Modules 默认不会全局注入，import后规则只作用于模块内部，对 Storybook iframe 无效
哪些样式能用 preview.js import 安全加载？
只要满足“构建后可用”，就适合走这条最简路径：
- Tailwind CSS 的产物（如
dist/tailwind.css或src/style/tailwind-output.css） - PostCSS 编译好的重置样式（
reset.css）、主题色定义（theme.css） - 通过
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 限制
webpackFinal 配置不是必须的，除非你要 Sass 变量
如果你的项目依赖 _variables.scss 或 _mixins.scss，那 preview.js 的 import 就不够用 —— 它不执行 Sass 编译逻辑。这时才需要 webpackFinal 注入 additionalData：
jm-jsjkxyjs02-zlm-405
下载
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
立即学习“前端免费学习笔记（深入）”；
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../src'),
options: {
additionalData: `@import "${path.resolve(__dirname, '../src/style/variables.scss')}";`
}
});
return config;
}
注意：这个配置只影响 .scss 文件的构建过程，不影响 preview.js 里已存在的 import 语句；两者可共存，但职责不同 —— 前者让组件内 import './Button.scss' 能用变量，后者让全局样式进 iframe。
真正容易被忽略的是：CSS Modules 和 Sass 变量属于两个层级的问题，混在一起配只会反复失败。先确认你到底要解决「样式没显示」还是「Sass 变量报错」，再决定动 preview.js 还是 main.js 的 webpackFinal。
