Storybook 里 CSS 样式不生效是怎么回事？

俊凤酱~ 提问于 2026-02-27 03:31:21 阅读 23

框架

我在 Storybook 里写了个按钮组件，本地开发时样式正常，但放到 Storybook 里就完全没样式了。我确定已经 import 了 CSS 文件，也试过在 .storybook/preview.js 里全局引入，但还是不行。

比如下面这段简单的按钮样式，在 Storybook 预览里完全没被应用：

.my-button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

是不是 Storybook 的 webpack 配置没处理 CSS？我用的是 Vite + React，没动过 Storybook 的默认配置。

我来解答赞 5 收藏

反馈

1 条解答

Tr° 皓阳 Lv1

你这问题不是 Storybook 的锅，是 Vite + Storybook 的默认配置里没加 CSS 支持。Storybook 的 Vite 配置默认只处理 JS/TS，CSS 得你自己手动加进去。

在 .storybook/main.js 里找到 stories 配置那块，加个 features 开关，或者直接改 core 里的 builder 和 renderer，但最简单的办法是：

export default {

  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],

  addons: [

    '@storybook/addon-links',

    '@storybook/addon-essentials',

    '@storybook/addon-interactions',

  ],

  framework: {

    name: '@storybook/react-vite',

    options: {},

  },

  docs: {

    autodocs: 'tag',

  },

};

然后在 .storybook/preview.js 里全局引入你写的 CSS 文件，比如：

import '../src/styles.css';

如果你用的是 CSS Modules 或者 Tailwind 之类的，那还得额外配置 Vite 的插件，比如 storybook-react-vite 默认不处理 PostCSS，得自己加 vite.config.js 里配置好，再让 Storybook 继承这个配置。

我之前踩过这坑，以为 Storybook 自动吃 CSS，结果发现它用的是 Vite 的默认配置，没加 css 处理链，所以你得确认 vite.config.js 里有没有 css 配置项，或者直接把 Storybook 的 Vite 配置指向你主项目用的那个 config。

2026-02-27 04:01