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

Posted 2023-02-19

【中文标题】如何使用 Storybook 6 在 Vuetify 中自定义主题？

【英文标题】：How to customize theme in Vuetify using Storybook 6?

【发布时间】：2021-11-12 03:39:06

【问题描述】：

我想使用 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;
  ,
;

【参考方案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',
;

主题现在完美运行，只是变量没有正确加载，我不知道如何解决这个问题，你可以在文章 cmets 中阅读它