既存のVue2プロジェクトでvuetifyのコンポーネントを明確かつ分離して使用する方法

Question

私はLaravel & Vue2で作業中のプロジェクトを持っています。私は、私のプロジェクトの特定のセクションで、VueプラグインのVuetifyからいくつかの重要なコンポーネントを使いたいと思っています。まず、蛇腹示すように、私は私のプロジェクトでVuetifyスタイルを追加した：この場合

... 
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> 
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"> 
</head> 

をvuetifyスタイルは私のプロジェクト全体のスタイルを行うだけでなく、私のコアスタイルはvuetifyコンポーネントスタイルを変更します。
私はまた、単一のファイルコンポーネントであるVueコンポーネントでスコープ指定されたスタイルを使用していました。しかし結果は以前と同じで、Vueコンポーネント全体が変更されました。だから、どのようにして、FABなどのvuetifyコンポーネントを使用して、コンポーネントのスタイルとコアスタイルを適切かつ明確に分けることができますか？私を助けてください。

Answer 1

2つの異なるCSSフレームワークを使用しているときに競合が発生するのは、通常のことです。幸いなことに、以降、a la carte機能を使用してvuetifyから特定のコンポーネントをインポートできるようになりました。

サンプル

import Vue from 'vue' 
import { Vuetify, VApp, VBtn } from 'vuetify' 

Vue.use(Vuetify, { 
    components: { 
    VApp, 
    VBtn 
    } 
}) 

この方法で、あなたは必要なものだけをインポートする必要があります。

https://vuetifyjs.com/vuetify/a-la-carte