如何在Storybook 6中使用@socheatsok78插件自定义Vuetify主题

问题排查与修复方案 #

核心错误点 #

• 主题配置位置错误：你当前将Vuetify主题配置放在了globalTypes.theme下，该addon的正确配置入口是parameters.vuetify字段
• 装饰器顺序错误：withVuetify必须放在withThemeProvider之前执行，顺序反转会导致主题注入失败
• SCSS加载规则冲突：你已经引入了@storybook/preset-scss处理样式，又额外配置了重复的SCSS加载规则，会引发样式加载异常

修改后的配置代码 #

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 parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  // vuetify主题配置移至此处
  vuetify: {
    theme: {
      dark: false,
      options: {
        customProperties: true,
        minifyTheme,
      },
      themes: {
        light: {
          primary: '#007BBF',
          secondary: '#008574',
        },
        dark: {
          primary: '#f099aa',
        },
      },
    }
  }
};

// 调整装饰器顺序
export const decorators = [withVuetify, withThemeProvider];

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',
  ],
  // 移除重复SCSS规则，仅保留全局变量注入逻辑
  webpackFinal: async (config) => {
    const scssRule = config.module.rules.find(rule => rule.test.toString().includes('scss'));
    scssRule.use.push({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, 'main.scss'),
      },
    })
    return config;
  },
};

额外注意事项 #

如果你的main.scss中需要覆盖Vuetify内置SASS变量，需要按照以下顺序编写：

// 先定义自定义变量
$primary: #007BBF;
$secondary: #008574;
// 再导入Vuetify基础样式
@import '~vuetify/src/styles/styles.sass';

配置修改完成后删除Storybook缓存，执行npx storybook --no-cache启动即可生效。

内容的提问来源于stack exchange，提问作者Freestyle09