如何在Astro项目中实现Storybook（React/Preact组件）的HMR功能

核心解决方案 #

问题根源是@storybook/addon-postcss与@storybook/addon-styling的PostCSS处理模块冲突，干扰了Vite的热更新机制。按以下步骤调整配置即可修复：

1. 移除冲突插件
   删除已安装的@storybook/addon-postcss依赖，并从Storybook配置的addons列表中移除该插件。

2. 绑定PostCSS配置到Vite流程
   在main.js中添加viteFinal函数，显式指定项目的PostCSS配置文件，确保Vite能正确识别Tailwind样式变更并触发热更新。

3. 确认Tailwind扫描范围
   确保tailwind.config.cjs的content数组覆盖所有需要处理的文件（你的现有配置已包含Storybook的stories文件，无需修改）。

修改后的配置文件 #

main.js

/** @type { import('@storybook/preact-vite').StorybookConfig } */

const config = {
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    {
      name: "@storybook/addon-styling",
      options: {
        postCss: true,
      },
    },
  ],
  framework: {
    name: "@storybook/preact-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  viteFinal: async (config) => {
    return {
      ...config,
      css: {
        ...config.css,
        postcss: "./postcss.config.cjs",
      },
    };
  },
};
export default config;

其他配置文件保持不变

• preview.js：确保正确导入../src/main.css
• postcss.config.cjs：保留现有插件配置
• tailwind.config.cjs：保留现有内容扫描与插件配置

原理说明 #

• 同时启用@storybook/addon-postcss和@storybook/addon-styling会导致PostCSS处理链重复注册，破坏Vite的热更新钩子，使得Tailwind样式修改无法实时同步到预览界面。
• 通过viteFinal显式绑定项目根目录的PostCSS配置，让Storybook的Vite构建流程直接复用项目的样式处理规则，确保样式变更能被正确捕获并触发HMR。

内容的提问来源于stack exchange，提问作者octavemirbeau