在 Storybook Vue 中导入节点模块

Posted 2023-02-19

【中文标题】在 Storybook Vue 中导入节点模块

【英文标题】：Import node module in 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;
  ,
;

【参考方案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) 不起作用