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ライフを🤘