Storybook nuxt build 不包括装饰器

Question

TLDR： nuxt + storybook + vuetify 构建的问题

我使用 Nuxt.js、Vuetify 和 Storybook 创建了一个新项目。

Storybook 开发服务器运行良好，我只需要在 nuxt 配置中添加一个装饰器：

$(window).on('beforeunload', function(){
    return "";
});

似乎唯一的问题是，在运行构建时，它没有加载装饰器，因此 Storybook 不能正确表示视觉方面。

// nuxt.config.js
storybook: {
    decorators: [
      // VApp decorator for Vuetify
      '<v-app><div><story/></div></v-app>',
    ],
  },

注意： 我确实使用了官方的 nuxt storybook

开发示例：

构建示例：

Answer 1

好的，所以我花了一些试验和错误，但我已经成功了。

1) 将 Vuetify 添加为插件

我们要做的第一件事是在插件目录中创建一个 vuetify.js 文件

.
├── plugins
│   └── vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify';
import colors from 'vuetify/es5/util/colors';
import { themes } from '~/config/themes';

import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

export default (ctx) => {
  const vuetify = new Vuetify({
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,
    options: {
      customProperties: true,
    },
    theme: {
      themes: {
        light: {
          ...themes.light,
        },
      },
    },
  });
  ctx.app.vuetify = vuetify;
  ctx.$vuetify = vuetify.framework;
};

2) 更新 nuxt 配置以加载 Vuetify

在您的 nuxt.config.js 中，确保删除 Vuetify 配置并将 vuetify 添加为插件，如下所示：

// nuxt.config.js
  plugins: ['@/plugins/vuetify.js'],

3) 添加故事书装饰器

添加 Vuetify 装饰器以在所有 Storybook 故事中支持 Vuetify。
在您的 nuxt.config.js 中添加以下装饰器

// nuxt.config.js

  storybook: {
    // Options
    decorators: [
      // VApp decorator for Vuetify
      `<v-app id='vuetify-storybook-decorator'><div><story/></div></v-app>`,
    ],
  },

4) 修复故事书的可见性

为了防止eatch story占据过大的屏幕高度并允许在一个视图中呈现多个故事，我们将仅在storybook中覆盖默认的vuetify min-height；

在您的 nuxt.config.js 文件中加载一个 storybook.scss 像这样

// nuxt.config.js

 // Global CSS (https://go.nuxtjs.dev/config-css)
 css: ['@/assets/storybook.scss'],

并在您的资产文件夹中添加 storybook.scss 文件：

.
├── assets
│   └── storybook.scss

/* storybook.scss */

#vuetify-storybook-decorator {
  // Remove the storybook full height of all components
  .v-application--wrap {
    min-height: unset;
  }
}

5) 构建项目

将构建命令添加到您的 package.json

// package.json
{
    "storybook": "nuxt storybook",
    "storybook:build": "nuxt storybook build"
}

然后在命令行中运行yarn storybook:build

构建将放置在/storybook-static中； 您可以通过在该文件夹上运行任何服务器来查看构建，例如：

$ npx http-server ./storybook-static

就是这样，我希望它会有所帮助:)