Vuetify 主题设置在 Storybook 中不起作用

Posted 2023-02-19

【中文标题】Vuetify 主题设置在 Storybook 中不起作用

【英文标题】：Vuetify theme settings not working in Storybook

【发布时间】：2019-03-04 22:42:24

【问题描述】：

（Vue 版本 - 2，Vuetify 和 Storybook - 最新）

考虑以下简单的按钮组件：

<template>
  <v-btn round
    color="primary">
    <slot></slot>
  </v-btn>
</template>

<script>
export default 
  name: "test-button",

</script>

在App组件文件中，调用方式如下：

  <v-app>
    <v-layout column justify-center>
      <v-layout row justify-center align-center>
         <test-button @click="testBtnClicked">
           Click It
         </test-button>
      </v-layout>
    </v-layout>
  </v-app>

Vuetify 设置在 main.js 中如下所示：

import Vue from 'vue';
import 'vuetify/dist/vuetify.min.css';
import Vuetify from "vuetify";
import colors from 'vuetify/es5/util/colors';

Vue.use(Vuetify, 
  theme: 
    primary: colors.indigo.base,
    info: colors.blue.lighten2,
    accent: colors.green.lighten1,
    error: colors.red.darken2
  
);

到目前为止，一切都很好 - 我在框架中间有一个漂亮的靛蓝色按钮，这是我所期望的。

现在，在 Storybook 配置中，我使用与 main.js 中相同的行来设置 Vuetify，我的 Storybook 文件如下所示：

import  storiesOf  from "@storybook/vue";

import TestButton from "./TestButton.vue";

storiesOf("TestButton", module)
  .add("button template", () => (
    template: '<test-button :rounded="true">round</test-button>',
    components: TestButton
  ))

这会在 Storybook 中呈现按钮，但不会发生主题设置，也就是说：按钮不是靛蓝，而是白色。 Vuetify 的其余属性似乎还不错——它看起来像一个带有白色文本的 Vuetify 圆形按钮。

我不确定这是 Vuetify 问题、Vue 问题还是 Storybook 问题（或者我的用户错误问题）。如果有人这样做，我将不胜感激。

这是我的 webpack.config.js（在 .storybook 中）：

module.exports = (baseConfig, env, defaultConfig) => 

  defaultConfig.plugins.push(new VueLoaderPlugin());

  return defaultConfig;
;

【参考方案1】：

几个月前我遇到了这个问题，所以它在我脑海中并不是最新鲜的。您需要导入将 Vuetify 添加到 Vue 的插件。这是我的.storybook 文件夹中的config.js 文件。

// #### /.storybook/config.js
import  configure  from '@storybook/vue';

import Vue from 'vue';
import Vuex from 'vuex'; // Vue plugins
import '@/plugins/allPlugins';

// Install Vue plugins.
Vue.use(Vuex);

const req = require.context('../src', true, /\.stories\.js$/)

function loadStories() 
  req.keys().forEach((filename) => req(filename))


configure(loadStories, module);

插件/所有插件

import Vue from 'vue'; // <---- important 
import './vuetify'; // <---- important 


import WebCam from 'vue-web-cam';
import Chat from '@/libs/vue-beautiful-chat/index';
import './styles';

import './ellipsis';
import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer';

Vue.use(WebCam);
Vue.use(Chat);
Vue.use(Viewer);

插件/vuetify

import Vue from 'vue';
import 
  Vuetify,
  VApp,
  ...
 from 'vuetify';

import colors from 'vuetify/es5/util/colors';

Vue.use(Vuetify, 
  components: 
    VApp,
    ...
  ,
  theme: 
    primary: colors.blue.lighten1,
    ...
  ,
);

我将所有插件分开的原因是因为自定义样式和其他插件在导入时我可以更好地控制。如果您需要自定义样式，则需要同时导入 Vuetify 插件和自定义样式。

【讨论】：

'k，看起来对我来说相关的事情是你正在使用'a-la-carte'安装。为此进行修改，我收到以下错误： ./node_modules/vuetify/src/stylus/components/_progress-circular.styl 中的错误模块解析失败：意外字符'@'（1：0）您可能需要适当的loader 来处理这种文件类型。 | @import '../bootstrap' |

您是否需要对 webpack 进行任何更改/添加？

你能发布你的storyboard/webpack.config.js吗？

添加到原始消息中。

我已经继续并在此处与 Storybook 人员提出了问题：github.com/storybooks/storybook/issues/4256。看看他们有没有什么要说的。

【参考方案2】：

我也有这个问题。

看了vuetify的代码，好像是css的生成，主题的注入是在VApp mixin app-theme这里进行的。

所以，我认为问题与 storybook 无关，而是 vuetify。

通过使用v-app 包装我希望测试的组件，就可以了。

所以，现在，请尝试在您的 config.js 中添加一个装饰器，如下所示：

import  configure, addDecorator  from '@storybook/vue';
import 'vuetify/dist/vuetify.css';

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify, 
  theme: 
    // your colors
  ,
);

addDecorator(() => (
  template: '<v-app><story/></v-app>',
));

...

你觉得还可以吗？

（在 github 上也回答：https://github.com/storybooks/storybook/issues/4256#issuecomment-440065778）

【讨论】：

不错。谢谢你的努力。我觉得也许我现在可以使用 Storybook。