Vuetify настройки темы не работают в сборнике рассказов - PullRequest
Новая
       25

Vuetify настройки темы не работают в сборнике рассказов

0 голосов
/ 29 сентября 2018

(версия Vue - 2, Vuetify и Storybook - последняя версия)

Рассмотрим следующий простой компонент кнопки: 

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

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

В файле компонента приложения он вызывается следующим образом: 

  <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}
  }))

Это визуализирует кнопку в сборнике рассказов, но настройки темы не происходят: кнопка не индиго, а белая.Остальные атрибуты Vuetify кажутся хорошими - это похоже на округленную кнопку Vuetify, с белым текстом.

Я не уверен, является ли это проблемой Vuetify или проблемой Vue или проблемой Storybook (илиошибка пользователя с моей стороны).Если бы кто-то сделал это, я был бы признателен за понимание.

Вот мой webpack.config.js (в .storybook): 

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

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

  return defaultConfig;
};

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

У меня тоже проблема.

После прочтения кода vuetify кажется генерация CSS, а внедрение темы производится в VApp mixin app-theme, расположенном здесь.

Итак, я думаю, что проблема связана не с сборником рассказов, а с 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)

0 голосов
/ 29 сентября 2018

Я столкнулся с проблемой несколько месяцев назад, так что она не самая свежая в моей памяти.Вам нужно импортировать плагин, который добавляет Vuetify к Vue.Вот файл config.js в моей папке .storybook. 

//#### /.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);

plugins / allPlugins 

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);

plugins / 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, так и собственные стили.

...