Vuetify は、フレームワークのすべての側面のスタイルと外観を作成するためにSASS/SCSSを使用しています。vue.config.js ファイルのoption__sass/scss データを利用して、オプションでカスタム変数を渡してグローバルデフォルトを上書きできます。使用可能な変数のリストは、各コンポーネントの API セクション内、およびこのページの Variable API にあります。この機能は vue-cli-plugin-vuetify によって自動的に処理されます。
注: SASS/SCSS 変数は A-la-carteインストール を使用時のみサポートされます。これは、vue-cli-plugin-vuetify プラグインを使用する場合に自動的に設定されます。
Vuetify をインストールしていない場合は、 クイックスタートガイド を確認してください。インストールしたら、variables.sass または variables.scss という名前のファイルを、src ディレクトリ下に sass, scss あるいは styles という名前のフォルダ内に作成します。vuetify-loaderは、フレームワークのデフォルトを上書きして、変数をVue CLIのコンパイルプロセスに自動的にブートストラップします。
yarn serveを実行すると、vuetify-cli-pluginは自動的に、すべてのsass/scssファイルへグローバルなVuetify変数を巻き上げます。個々のコンポーネント変数を変更する場合は、手動で変数ファイルをインクルードする必要があります。以下に カスタム変数 ファイルの例があります。
近日公開予定です。このセクションでの共同作業に興味がある方は、communityの johnleider に連絡してください。
このセクションでは、クイックスタート ページのWebpackガイドを既に読んでいることを前提としています。このオプションは、使用している sass-loader のバージョンによって異なります。 SASS / SCSSデータオプションには異なる行末記号があるため、SASS / SCSSデータオプションを設定する際には、適切な構文を使用してください。 prependData の詳細については、sass-loaderのGithubページを参照してください。
Vuetify フレームワーク全体でカスタマイズできる SASS/SCSS 変数は多数あります。以下はカスタムvariablesファイルの例です。利用可能な variables の詳細については、以下をご覧ください:
以下は、変数ファイルの例です。
コンポーネント内でVuetify変数をインポートして使用するには2つの方法がありますが、どちらも同じ結果になります。1つ目の方法は、デフォルトのフレームワーク・スタイルファイルをインポートする方法です:
Presets を使用している場合や、変数ファイルを全く使用していない場合は、この方法が好ましいです。
2つ目の方法は、プロジェクトの specific 変数ファイルをインポートする方法です。これは、グローバルなVuetifyスタイルをインポートするため独自の変数ファイルを使用している場合に推奨されます。
変数ファイルをインポートして使用する場合、SASSとSCSSのどちらの構文を使用するかは重要ではないということを覚えておいてください。
Sass 変数を使用する場合、注意すべき考慮事項がいくつかあります。
変数ファイルを使用する場合は、他の変数を定義またはインポートするだけであることを確認してください。ブートストラップされたファイルはすべてのコンポーネントに追加され、アプリ内でCSSが重複する原因となります。以下は、してはいけないことの例です。
変数を使用する場合、アプリケーションの初期コンパイルが増えます。これは、巻き上げられた変数ファイルに変更を加えるたびに、スタイルがリアルタイムで更新されるという事実に起因します。これは最初のコンパイルステップでのみ発生しますが、Vuetifyをインポートする場所を変更することで改善することができます。アプリケーションが Vuetify ローダーの制限 の影響を受けている場合、この機能は動作しないことを覚えておいてください。