Storybook에서 Vuetify 테마 설정이 작동하지 않음

Storybook에서 Vuetify 테마 설정이 작동하지 않음

(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;
};

저도 문제가 있어요.

vuetify의 코드를 읽은 후, CSS의 생성으로 보이며, 테마의 주입이 이루어졌습니다.VApp혼재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)

나는 몇 달 전에 그 문제에 부딪혔기 때문에 내 머릿속에는 신선하지 않다.Vue에 Vuetify를 추가하는 플러그인을 가져와야 합니다.여기 있습니다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);

플러그인/모든 플러그인

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

플러그인/재설정

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,
    ...
  },
});

모든 플러그인을 분리한 이유는 커스텀 스타일 및 기타 플러그인 때문에 Import 시 관리가 용이했기 때문입니다.커스텀 스타일이 필요한 경우 둘 다 Import해야 합니다.Vuetify플러그인과 커스텀 스타일.

언급URL : https://stackoverflow.com/questions/52563713/vuetify-theme-settings-not-working-in-storybook