nuxt-buefyでMaterialDesignIconsのCDN読み込みをやめる

Nuxt.jsのプロジェクト作成時にBuefyを選択した場合、nuxt-buefyを使うようになります。
何も設定せずにMaterialDesignIcons(mdi)が使えるんですが、デフォルトのままではcssをCDNで読み込んでしまいます。
GithubのIssueで回避方法が紹介されているんですが、紹介した方はこのやり方に納得していないようです。
それにこのやり方だと、mdiのcssをコミットに含めてしまうため、あまり得策とは言えません。

という事で、コミットにcssを含めずCDNを使わない方法を~~考えてみました。~~紹介します。
IssueのやりとりでjtommyさんがmaterialDesignIconsをfalseにしろって言ってますね(^^;;

まずmdiのパッケージを追加します。

yarn add @mdi/font

nuxt.config.js(ts)のcssにmdiのパスを追加しnuxt-buefyのCDN読み込みを止めます。

nuxt.config.js

css: [
	'@mdi/font/css/materialdesignicons.min.css'
],
modules: [
	[
		'nuxt-buefy',
		{
			materialDesignIcons: false
		}
	]
],

buefyのcssをカスタマイズしてる場合、そのcssより先にmdiのcssを読み込む必要があります。

nuxt.config.js

css: [
	'@mdi/font/css/materialdesignicons.min.css',
	'~/assets/style.scss'
],
modules: [
	[
		'nuxt-buefy',
		{
			css: false,
			materialDesignIcons: false
		}
	]
],

これだけでパフォーマンスが若干向上するはずです。

それでは良いnuxt-buefyライフを🤘