在 Storybook Vue 中导入节点模块答案

【问题标题】：Import node module in Storybook Vue在 Storybook Vue 中导入节点模块
【发布时间】：2021-08-13 02:00:51
【问题描述】：

我希望所有故事都具有 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;
  },
};

【问题讨论】：

标签： vue.js webpack vuejs3 storybook

【解决方案1】：

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

@storybook/vue3: "^6.3.8" @vue/cli-service：“~4.5.0” 元素加：“^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$/,
    },
  },
}

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

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

【讨论】：

@storybook/vue3(6.4.9) 和 element-plus(1.3.0-beta.1) 不起作用