fontawesome5・normalize.css・bulmaの導入

ライブラリの導入に少し時間がかかってしまったのでメモ程度に残しておきます。

ちなみにRails環境でJS、CSSをwebpackで管理している前提となります。

バージョン

• fontawesome ver.5.6.3
• bulma ver.0.7.2
• normalize.css ver.8.0.1

インストール

まずはそれぞれをyarnで導入します。

$ yarn add -D @fortawesome/fontawesome-free bulma normalize.css

webpack

fontawesomeのファイルをビルドする際に、fontに関する設定をしてないとエラーになります。 また、これらの導入後にwebpackが重くなったので調べたところmapファイルの作成に時間がかかっていたので、快適な開発を行いたかったらコメントアウトしておくことをお勧めします。

~~~~~~~~~~~~~~~~~ 省略
    // devtool: IS_DEV ? 'source-map' : 'none',
~~~~~~~~~~~~~~~~~ 省略
        {
          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: 'fonts/[name].[ext]',
                publicPath: '../'
              }
            }
          ]
        }
      ]
    },
~~~~~~~~~~~~~~~~ 省略
      extensions: [
        '.js',
        '.scss',
        'css',
        '.vue',
        '.jpg',
        '.png',
        '.gif',
        '.woff',  // 追加
        '.woff2',  // 追加
        '.svg',  // 追加
        '.ttf',  // 追加
        '.eot',  // 追加
        ' '
      ]
    },
~~~~~~~~~~~~~~~ 省略

webpack-dev-server

そのままではCORSエラーでfontが取得できません。

qiita.com

設定を追加します。

    devServer: {
      host: 'localhost',
      port: 3035,
      publicPath: 'http://localhost:3035/public/assets/',
      contentBase: path.resolve(__dirname, 'public/assets/'),
      hot: true,
      disableHostCheck: true,
      historyApiFallback: true,
      headers: {
        'Access-Control-Allow-Origin': '*',  // 追加
        'Access-Control-Allow-Headers': '*' // 追加
      }
    }

@import

エントリポイントとなるscssファイルで@importします。

@import '~normalize.css/normalize.css';
@import '~@fortawesome/fontawesome-free/css/all.css';
@import '~bulma/css/bulma.css';

ここでかなり詰まってしまったのですが、パスの先頭にチルダをつけることによってnode_module以下を参照してくれるようです。

以上で完了です。