Storybook的viewport -不显示自定义视口大小的插件(svelte-kit)

Question

我在让Storybook显示我的一组视口时遇到了问题，它显示的是MINIMAL_VIEWPORTS

// .storybook/preview.js
import { INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';

const customViewport = {
    iphone12promax: INITIAL_VIEWPORTS.iphone12promax,
    ipad: INITIAL_VIEWPORTS.ipad,
    desktop: MINIMAL_VIEWPORTS.desktop
};

export const parameters = {
    actions: { argTypesRegex: '^on[A-Z].*' },
    viewport: {
        viewports: { ...customViewport }
    },
    controls: {
        matchers: {
            color: /(background|color)$/i,
            date: /Date$/
        }
    }
};

// .storybook/main.js
module.exports = {
    core: {
        builder: 'storybook-builder-vite'
    },
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-svelte-csf',
        '@storybook/addon-a11y',
        '@storybook/addon-viewport'
    ],
    svelteOptions: {
        preprocess: import('../svelte.config.js').preprocess
    }
};

// .storybook/package.json
{
    "type": "commonjs"
}

// package.json -- project level
{
    "name": "app",
    "version": "0.0.1",
    "scripts": {
        "dev": "svelte-kit dev",
        "build": "svelte-kit build",
        "preview": "svelte-kit preview",
        "check": "svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --ignore-path .gitignore  --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
        "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
        "storybook": "start-storybook -p 6006 --no-manager-cache",
        "build-storybook": "build-storybook"
    },
    "devDependencies": {
        "@babel/core": "^7.15.4",
        "@poppanator/sveltekit-svg": "^0.1.4",
        "@storybook/addon-a11y": "^6.3.7",
        "@storybook/addon-actions": "^6.3.7",
        "@storybook/addon-essentials": "^6.3.7",
        "@storybook/addon-links": "^6.3.7",
        "@storybook/addon-svelte-csf": "^1.1.0",
        "@storybook/svelte": "^6.3.7",
        "@sveltejs/kit": "next",
        "@typescript-eslint/eslint-plugin": "^4.19.0",
        "@typescript-eslint/parser": "^4.19.0",
        "autoprefixer": "^10.3.1",
        "babel-loader": "^8.2.2",
        "cssnano": "^5.0.6",
        "eslint": "^7.22.0",
        "eslint-config-prettier": "^8.1.0",
        "eslint-plugin-svelte3": "^3.2.0",
        "postcss": "^8.3.5",
        "postcss-load-config": "^3.1.0",
        "prettier": "~2.2.1",
        "prettier-plugin-svelte": "^2.2.0",
        "storybook-builder-vite": "^0.0.12",
        "svelte": "^3.42.4",
        "svelte-check": "^2.0.0",
        "svelte-loader": "^3.1.2",
        "svelte-preprocess": "^4.7.4",
        "tailwindcss": "^2.2.4",
        "tslib": "^2.0.0",
        "typescript": "^4.0.0"
    },
    "type": "module",
    "dependencies": {
        "dexie": "^3.0.3"
    }
}

Storybook实际视口列表：

​

​

Answer 1

你能列出你正在使用的版本吗？在Github on this上报告了一个错误... "...that调用故事书根路径将切换到已配置的默认路径('iphone6')，但在特定组件上重新加载(或输入特定组件的URL )默认为‘responsive’...“

此外，从上面的代码中，我可以看到您缺少一个default viewPort。

​

​

请尝试配置默认viewPort，然后，例如，从Storybook ref.。

// MyComponent.stories.js | MyComponent.stories.ts | MyComponent.stories.jsx | MyComponent.stories.tsx

import React from 'react';

import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

export default {
  title: 'Stories',
  parameters: {
    // The viewports object from the Essentials addon
    viewport: {
      // The viewports you want to use
      viewports: INITIAL_VIEWPORTS,
      // ***** Please configure your own Default Viewport
      defaultViewport: 'iphone6'
    },
  },
};

export const MyStory = () => <div />;
MyStory.parameters = {
  viewport: {
    defaultViewport: 'iphonex'
  },
};