为何Element-plus在Storybook中无法正常生效？

问题场景 #

Vue3 + Vite项目中，已配置Storybook使用@storybook/builder-vite构建器，执行npm run dev时Element Plus组件样式正常加载，但运行npm run storybook时，Element Plus组件样式完全不生效，普通CSS样式可正常显示。

解决方案 #

方案1：全局引入Element Plus（快速解决）

修改或创建.storybook/preview.js文件，在其中全局注册Element Plus并导入样式：

// .storybook/preview.js
import 'element-plus/dist/index.css';
import { app } from '@storybook/vue3';
import ElementPlus from 'element-plus';

// 全局注册Element Plus
app.use(ElementPlus);

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

重启Storybook服务后，Element Plus的全局样式和组件会被加载到Storybook的Vue实例中。

方案2：按需引入（适配项目按需配置）

如果项目中使用unplugin-auto-import和unplugin-vue-components实现Element Plus按需引入，需要让Storybook继承项目的Vite配置：

1. 修改.storybook/main.js，添加viteFinal配置合并项目Vite插件：

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  core: {
    builder: '@storybook/builder-vite',
  },
  async viteFinal(config) {
    // 导入项目根目录的Vite配置
    const { default: viteConfig } = await import('../vite.config.js');
    // 合并Vite插件配置
    config.plugins.push(...viteConfig.plugins);
    return config;
  },
};

2. 若未在项目Vite配置中集成按需插件，可直接在viteFinal中手动添加：

// .storybook/main.js
const AutoImport = require('unplugin-auto-import/vite');
const Components = require('unplugin-vue-components/vite');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  core: {
    builder: '@storybook/builder-vite',
  },
  async viteFinal(config) {
    config.plugins.push(
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      })
    );
    return config;
  },
};

先执行npm install unplugin-auto-import unplugin-vue-components --save-dev安装依赖，再重启Storybook服务即可。

验证 #

执行npm run storybook重启服务，查看Element Plus组件是否正常显示样式。

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