如何使用Storybook6在Vuetify中定制主題？ -有解無憂

我想在Vuetify中使用Storybook 6來定制主題，我正在使用@socheatsok78/storybook-addon-vuetify包https://storybook.js.org/addons/@socheatsok78/storybook-addon-vuetify/a>

我完全按照檔案所說的做了，但主題仍然完全不能作業。我想用自定義屬性和我自己的調色板來配置 vuetify。

preview.js

import '！style-loader！css-loader！sass-loader！./main.scss'/span>。
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'/span>,
        secondary: '#008574',
      },
      dark: {
        primary: '#f099aa',
      },
    },
  },
};

export const parameters = {
  action: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      日期。/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$/,
      使用: [
        '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。
  },
};

uj5u.com熱心網友回復：

好的，我修復了這個主題，你可以在下面找到一個如何做到這一點的教程和所有作業代碼。我在這里找到了一個很好的解釋：

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'/span>。

import Vue from 'vue'/span>;

export const parameters = {
  action: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      日期。/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

我從addons中洗掉了一行內容

'@socheatsok78/storybook-addon-vuetify',/code>
vuetify.js
import Vue from vue;
import Vuetify from 'vuetify'。
import minifyTheme from 'minify-css-string';
import主題 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 {
  //...其他顏色
  primary: '#007BBF',
};

主題現在作業得很完美，只有變數沒有被正確加載，我不知道如何解決這個問題，你可以在文章的評論中看到這個問題。






        
      轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/331511.html
      標籤：
      上一篇：Jest在使用d3時出現意外的令牌"出口"。
下一篇：下拉選單在顯示設定為無后不能下降