在Storybook Vue中导入节点模块

Question

我希望所有的故事都有elementPlus的样式，但它没有正确导入。我尝试过使用包装器来实现，但它实际上并不使用elementPlus。如何在所有故事中加载elementPlus？

Preview.js：

import elementPlus from 'element-plus';
import { addDecorator } from '@storybook/vue3';

addDecorator(() => ({
  template: '<div style="color: red;"><elementPlus><story/></elementPlus></div>',
}));

Main.js：

const path = require('path');

module.exports = {
  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
    '../plugins/**/*.stories.@(js|jsx|ts|tsx)',
    '../plugins/**/*.stories.mdx',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
  ],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.s?css$/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader',
          options: {
            modules: false
          }
        },
        { loader: 'sass-loader' }
      ],
      include: path.resolve(__dirname, "../"),
    });

    return config;
  },
};

Answer 1

我尝试将element-plus设置为全局。

@storybook/vue3："^6.3.8“@vue/cli-service："~4.5.0”element-plus："^1.1.0-beta.12“

Preview.js：

​

import ElementPlus from 'element-plus';
import '../node_modules/element-plus/theme-chalk/index.css';
import { storybookApp } from '../node_modules/@storybook/vue3/dist/esm/client/preview/render';
storybookApp.use(ElementPlus);
export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

​

这不是最好的解决方案，但它可以使用。

如果你有好的答案，请与我分享。谢谢!