Vuetify를 스토리북에서 이동하기 위한 설정
환경은 vue-cli ui를 사용하여 설치했습니다.
환경
CLI 또는 CLI-PLUGIN
설치된 라이브러리
버전
vue-cli(3.4.0)
vue
2.6.2
vue-cli-plugin-storybook(0.5.1)
@storybook/vue
4.1.11
vue-cli-plugin-vuetify(0.4.6)
vuetify
1.5.0
설정
config/storybook/config.js
// 以下のコードを追加する
import Vue from 'vue';
// webpackで読み込めるように、ビルドされたmin.jsとmin.cssを読み込む
import Vuetify from 'vuetify/dist/vuetify.min';
import 'vuetify/dist/vuetify.min.css';
// Themeの設定を行っている場合は同様の設定を行う。
Vue.use(Vuetify, {
iconfont: 'md',
});
config/storybook/config.js
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
</head>
보충
vue-cli-plugin-vuetify를 사용하여 설치하면 다음과 같은
src/plugins/vuetify.ts가 생성됩니다.vuetify.ts
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'vuetify/src/stylus/app.styl';
Vue.use(Vuetify, {
iconfont: 'md',
});
TypeScript 프로젝트의 경우 storybook의 webpack에서 빌드할 수 없기 때문에 Vuetify를 사용할 수 없다. 빌드 후의 js, css를 읽음으로써 회피 가능.
마지막으로
storybook의 4 계열이라면 webpack의 기본값을 덮어 쓰고 싶지만 webpack.config가 어디에 있는지 모릅니다 ...
Reference
이 문제에 관하여(Vuetify를 스토리북에서 이동하기 위한 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/shikazuki/items/648dfab1c31cb88f4623텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
