LoginSignup
0
0

More than 3 years have passed since last update.

v-calender でCSSが効かない件

Last updated at Posted at 2021-01-20

環境

 エディタ:VS-CODE
Vue:@vue/cli 4.5.9 vue": "2.6.11",
"v-calendar": "2.1.6",
"bootstrap": "4.5.3",

初めての記事なので、わかりにくい場合は申し訳ありません。

カレンダーをVueで利用しようと思い、v-calenderを選択しました。
サンプルとして、GitHubの
https://github.com/nathanreyes/v-calendar/blob/master/docs/.vuepress/components/homepage/custom-calendar.vue
からコードをコピペしてVS-CODEに張り付けたのですが、CSSが適用されず困っていました。
調べたところissueにも回答が見つけられず、自力で調べてみました。
参考issue : https://github.com/nathanreyes/v-calendar/issues/727
まだ、Gitのサンプルと違う?というところはありますが、備忘録的に記載しておきます。

1.npm or yarn経由でTailwindをインストールする

   # Using npm
   npm install tailwindcss
   または、
   # Using Yarn
  yarn add tailwindcss 

2.main.js にてCSSをインポートする。

  CSSの該当ファイルが見つからず苦労しました・・・

main.js

import "tailwindcss/dist/tailwind.css";
//VCalender の設定
import VCalendar from 'v-calendar';
Vue.use(VCalendar);

image.png

より良い方法があればご指導ください。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0