【Laravel Mix】webpack で Bootstrap Icons をバンドルして使う

バージョン

• Laravel 7
• bootstrap-icons 1.7.2

前提

js と css をそれぞれ webpack で1つのファイルにまとめて public 以下に置いています。

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

resources/js/app.js

import './bootstrap';

resources/sass/app.scss

@use "./base/bootstrap";

@use "./modules/btn";
@use "./modules/footer";

まず bootstrap-icons をインストール

npm i bootstrap-icons

すると、node_modules 配下に bootstrap-icons ディレクトリができます。

node_modules/
└── bootstrap-icons/
    ├── font
    │    ├── fonts/
    │    ├── bootstrap-icons.css
    │    ├── bootstrap-icons.json
    │    └── bootstrap-icons.scss
    ├── icons
    │    ├── ***.svg

この bootstrap-icons.scss を 先ほどの app.scss に追加します。

resources/sass/app.scss

@use "./base/bootstrap";

@use "./modules/btn";
@use "./modules/footer";

// ここに追加
@use "bootstrap-icons/font/bootstrap-icons";

ここで エラー発生
GET http://localhost/css/fonts/bootstrap-icons.woff2?30af91b... net::ERR_ABORTED 404 (Not Found)

原因

bootstrap-icons.scss の冒頭で fonts ディレクトリを参照していました。
しかも 相対パス で...

node_modules/bootstrap-icons/font/bootstrap-icons.scss

$bootstrap-icons-font: "bootstrap-icons" !default;
$bootstrap-icons-font-src: url("./fonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d") format("woff2"),
url("./fonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d") format("woff") !default;

解決方法

public/css 以下に fonts ディレクトをコピーすればいいのですが、
構造が気持ち悪いので js 側で読み込むことにしました。

必要なモジュールをインストール

npm install url-loader

webpackに設定

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

mix.webpackConfig({
    module: 
        rules: [
            {
                test: /\.(woff|woff2|eot|ttf|svg)$/,
                use: {
                  loader: 'url-loader',
                }
            }
        ]
    }
});

js 側で読み込む

resources/js/app.js

import './bootstrap';

// ここに追加
import 'bootstrap-icons/font/bootstrap-icons.css';

すると エラーが変わって
GET http://localhost/fonts/bootstrap-icons.woff2?30af91b... net::ERR_ABORTED 404 (Not Found)
となるので、public 以下に fonts ディレクトリを設置すればいけそうです。

フォント設置

Laravel Mix の便利な copy メソッドを使用します。
ビルド時に bootstrap-icons の fonts ディレクトリを public 以下にコピーします。

copyメソッドは、ファイルやディレクトリを新しい場所へコピーします。これはnode_modulesディレクトリ中の特定のアセットをpublicフォルダへ再配置する必要がある場合に便利です。

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .copy('node_modules/bootstrap-icons/font/fonts', 'public/fonts'); // 追加

これで無事にアイコンフォントが使えるようになりました👼

index.html

<i class="bi-alarm"></i>

参考