如何使用 Storybook 6 在 Vuetify 中自定义主题？

Question

我想使用 Storybook 6 在 Vuetify 中自定义主题，我正在使用 @socheatsok78/storybook-addon-vuetify 包 https://storybook.js.org/addons/@socheatsok78/storybook-addon-vuetify

我完全按照文档中的说明进行了操作，但主题仍然根本不起作用。我想使用自定义属性和我自己的调色板配置 vuetify。

preview.js

import '!style-loader!css-loader!sass-loader!./main.scss';
import {
  withVuetify,
  withThemeProvider,
} from '@socheatsok78/storybook-addon-vuetify/dist/decorators';
import minifyTheme from 'minify-css-string';

export const globalTypes = {
  theme: {
    dark: false,
    options: {
      customProperties: true,
      minifyTheme,
    },
    themes: {
      light: {
        primary: '#007BBF',
        secondary: '#008574',
      },
      dark: {
        primary: '#f099aa',
      },
    },
  },
};

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

export const decorators = [withThemeProvider, withVuetify];

main.js

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-docs',
    '@storybook/addon-essentials',
    '@storybook/preset-scss',
    '@socheatsok78/storybook-addon-vuetify',
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            resources: path.resolve(__dirname, 'main.scss'),
          },
        },
      ],
      sideEffects: true,
      include: path.resolve(__dirname, '../'),
    });
    return config;
  },
};

Answer 1

好的，我修复了主题，您可以在下面找到如何执行此操作的教程以及所有工作代码。我在这里找到了很好的解释：

https://morphatic.com/2020/09/30/configuring-storybook-6-for-vue-2-vuetify-2-3/

preview.html

import '!style-loader!css-loader!sass-loader!./main.scss';
import { withVuetify } from '@socheatsok78/storybook-addon-vuetify/dist/decorators';
import vuetify from './vuetify';

import Vue from 'vue';

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

export const decorators = [
  (story, context) => {
    const wrapped = story(context);

    return Vue.extend({
      vuetify,
      components: { wrapped },
      template: `
        <v-app>
          <v-container fluid>
            <wrapped/>
          </v-container>
        </v-app>
    `,
    });
  },
  withVuetify,
];

main.js

我从插件中删除了一行

'@socheatsok78/storybook-addon-vuetify',

vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify';
import minifyTheme from 'minify-css-string';
import theme from './theme';
import LRU from 'lru-cache';

const themeCache = new LRU({
  max: 10,
  maxAge: 1000 * 60 * 60, // 1 hour
});

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    options: {
      customProperties: true,
      minifyTheme,
      themeCache,
    },
    themes: {
      light: theme,
    },
  },
});

theme.js

export default {
  // ... other colors
  primary: '#007BBF',
};

主题完美，只是变量加载不正确，不知道如何解决，大家可以在文章评论中了解一下

如何使用 Storybook 6 在 Vuetify 中自定义主题？

How to customize theme in Vuetify using Storybook 6?

javascript

webpack

storybook