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

这问题挺常见的，Vite + Storybook 的 CSS 加载有时候确实会抽风。

先检查一下你的 CSS 是怎么引入的。在 preview.js 里这样写：

import '../src/index.css'; // 确保路径正确



const preview = {

  parameters: {

    actions: { argTypesRegex: "^on[A-Z].*" },

    controls: { matchers: { color: /(background|color)$/i } },

  },

};



export default preview;

路径要对，如果你的 CSS 在 src 目录下就这样引。

如果还不行，很可能是 PostCSS 配置没加载到。Storybook 7+ 用 Vite 但不一定自动读你根目录的 postcss.config.js。

解决办法是在 .storybook/main.js 里加个配置：

module.exports = {

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

  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],

  framework: {

    name: '@storybook/react-vite',

    options: {},

  },

  docs: {

    autodocs: "tag",

  },

  viteFinal: async (config) => {

    // 确保 PostCSS 配置被加载

    return config;

  },

};

其实最省心的办法是直接装 @storybook/addon-postcss，然后在 main.js 里加上：

addons: ['@storybook/addon-postcss'],

装一下：

npm install @storybook/addon-postcss --save-dev

装完重启 storybook，一般就 OK 了。

还有一种情况，如果你用的是 CSS Modules（类名被哈希了的那种），那在组件里要这样写：

/* Button.module.css */

.button {

  padding: 8px 16px;

  background-color: #007bff;

  color: white;

  border: none;

  border-radius: 4px;

  cursor: pointer;

}

然后在组件里：

import styles from './Button.module.css';



export const MyButton = () => (

  <button className={styles.button}>点击我</button>

);

这样 Storybook 就能正确识别了。

你先试一下装 addon-postcss 这个方法，十有八九能解决。

你这问题不是 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。