不能。Storybook 不原生支持纯 HTML 文件，需将 HTML 片段封装为框架组件或通过 html 模板字符串 + render 函数实现预览，直接放入 button.html 无法识别、加载或热更新。
Storybook 能直接预览纯 HTML 组件吗？
不能。Storybook 本质是基于 JavaScript 框架（如 React、Vue、Svelte）的 UI 开发环境，它不原生支持裸 index.html 或无框架的纯 HTML + CSS + JS 文件。你扔一个 button.html 进去，它不会自动识别、加载或热更新——这不是 Storybook 的设计目标。
想用 Storybook 预览 HTML 片段，核心思路只有一条：把它“裹”进一个框架组件里，再由 Storybook 渲染这个组件。
怎么把纯 HTML 写成 Storybook 可用的 story？
最轻量、最可控的方式是用 html 模板字符串 + render 函数（Storybook 的 args + render API），适用于不依赖框架逻辑的静态结构预览：
常见错误现象：Unexpected token ' —— 直接在 <code>.stories.js 里写 <div>...</div>，JS 解析器报错；必须用字符串或 DOM 构造方式。
- 用
html标签函数（需安装@storybook/addon-html）或手动document.createElement+innerHTML - 推荐用
@storybook/addon-html：它提供html标签函数，支持语法高亮和简单插值，且不引入框架依赖 - 安装后，在
.storybook/main.js中启用：addons: ['@storybook/addon-html'] - 写 story 时，导出一个
render返回html`<button class="btn">${args.label}</button>`
export default {
title: 'HTML/Button',
argTypes: { label: { control: 'text' } },
};
export const Primary = (args) => html`<button class="btn">${args.label}</button>`;
为什么不用 Web Components 或 iframe 嵌入？
Web Components（如 customElements.define）看似“原生 HTML”，但 Storybook 仍需用 JS 加载并挂载它，且生命周期、样式隔离、热更新支持都不稳定；iframe 方式（src 指向本地 button.html）会绕过 Storybook 的构建流程，导致 CSS 不生效、路径 404、无法响应 args 变更。
使用场景明确：如果你只是想快速看一段带 class 的 HTML 在不同主题/尺寸下的视觉表现，@storybook/addon-html 是唯一合理选择；若组件含交互逻辑（比如点击弹窗），就必须迁移到对应框架（React/Vue）下重写，否则维护成本远高于收益。
参数差异：html 标签函数不支持 JSX 式事件绑定（如 onClick），所有行为需靠外层 JS 注册，或改用 template.innerHTML + addEventListener 手动补全。
立即学习“前端免费学习笔记（深入）”；
样式怎么同步？CSS 文件不生效怎么办？
Storybook 默认不自动加载项目根目录的 style.css 或 index.css。纯 HTML story 里的 class 名字对了，但样式没来，是高频问题。
性能 / 兼容性影响：全局注入 CSS（如在 .storybook/preview.js 里 import '../src/style.css'）最简单，但会导致所有 stories 共享样式，可能污染隔离环境；按 story 单独 insertRule 或 createStyleSheet 太重。
- 推荐方案：在
.storybook/preview.js中统一import你的主样式文件（确保路径正确，建议用绝对路径别名） - 检查是否启用了 CSS 支持：确认已安装
@storybook/addon-styling或项目有postcss/css-loader配置 - 如果用了 CSS-in-JS 或 scoped style，纯 HTML 无法访问，必须改用 class-based 外部 CSS
