create nuxt-app で bulma を選択した際にfont-awesomeが使えずに困った

create nuxt-app 便利ですよね。

それを使って、 Bulma ベースのNuxt.jsなAppを作ろうとした際にFont Awesomeが使えずに困ったのでメモ。

最初にやったこと

• Nuxt.jsのインストール の通りに進めて、CSS FrameworkはBulmaを選択
• yarn add @nuxtjs/font-awesome する
• nuxt.config.js にそれを足す

modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc:https://github.com/nuxt-community/modules/tree/master/packages/bulma
    '@nuxtjs/bulma',
    '@nuxtjs/pwa',
    '@nuxtjs/font-awesome', <-- ここを足す
  ],

• なのに、vueなファイルで、

<span class="icon">
  <i class="fas fa-desktop"></i>
</span>

とかしても、アイコンが出ない。四角枠打鍵表示されるので露骨にCSS問題っぽい。

一方で、 node_modules/@nuxtjs/font-awesome の index.js とかみても、ちゃんとCSS PUSHしてくれているっぽいので、何がおかしいんだかさっぱり・・・という状態になった。

で、どうしたか

fort-awesome 入れた。 fo r t-awesome らしい。

• まず、これを消す

modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc:https://github.com/nuxt-community/modules/tree/master/packages/bulma
    '@nuxtjs/bulma',
    '@nuxtjs/pwa',
    // '@nuxtjs/font-awesome', <-- ここを消す。というか戻す。
  ],

• yarn add @fortawesome/fontawesome-free する
• nuxt.config.js に以下を足す

  css: ['@fortawesome/fontawesome-free/css/all.css'],

これで表示された。まぁ逃げですね。

何がおかしかったのかがよくわからないので、ちょっと時間ができたらちゃんと調べてみたいと思います。

まずちょっと画面のイメージを固めたいので、それが終わったら後学のためにもちゃんとやろう。