Storybook nuxt build 不包含装饰器

Question

TLDR： nuxt + storybook + vuetify 构建问题

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

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

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

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

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

注意：我确实用了官方的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) 修复 Storybook 可见性

为了防止故事占据全屏高度并允许在视图中呈现多个故事，我们将仅在故事书中覆盖默认的 vuetify 最小高度；

在你的 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

就这些了，希望对你有帮助:)

Storybook nuxt build 不包含装饰器

Storybook nuxt build does not includes decorators

vue.js

nuxt.js

vuetify.js

storybook

1) 添加 Vuetify 作为插件

2) 更新 nuxt 配置以加载 Vuetify

3) 添加故事书装饰器

4) 修复 Storybook 可见性

5) 构建项目