Laravel5.4 Semantic UI（less）のコンパイルでハマったこと

概要

Semantic UIを何となく使ってみたくなったので、Laravel Mixでアセットのコンパイルを試したらハマった件・・・

ハマったこと

Laravel Mixでアセットコンパイル時にフォントファイルが見つからないエラーが発生した。

These relative modules were not found:

* ./semantic/src/themes/themes/default/assets/fonts/icons.eot in ./~/css-loader?{"url":true,"sourceMap":false}!./~/postcss-loader?{"sourceMap":false}!./~/less-loader?{}!./resources/assets/less/app.less
* ./semantic/src/themes/themes/default/assets/fonts/icons.woff2 in ./~/css-loader?{"url":true,"sourceMap":false}!./~/postcss-loader?{"sourceMap":false}!./~/less-loader?{}!./resources/assets/less/app.less
* ./semantic/src/themes/themes/default/assets/fonts/icons.woff in ./~/css-loader?{"url":true,"sourceMap":false}!./~/postcss-loader?{"sourceMap":false}!./~/less-loader?{}!./resources/assets/less/app.less
* ./semantic/src/themes/themes/default/assets/fonts/icons.ttf in ./~/css-loader?{"url":true,"sourceMap":false}!./~/postcss-loader?{"sourceMap":false}!./~/less-loader?{}!./resources/assets/less/app.less
* ./semantic/src/themes/themes/default/assets/fonts/icons.svg in ./~/css-loader?{"url":true,"sourceMap":false}!./~/postcss-loader?{"sourceMap":false}!./~/less-loader?{}!./resources/assets/less/app.less                                                                                                                                                                    

環境

Laravel 5.4.25
PHP 7.1.3
Semantic UI 2.2.10

実行手順

• Semantic UIをマニュアル通りにインストール
  ※置き場所は「resources/assets/less/semantic」
• app.lessファイルを作成
• webpack.mix.jsを修正

resources/assets/less/app.less

& { @import "semantic/src/semantic"; }

webpack.mix.js

const { mix } = require('laravel-mix');
mix.less('resources/assets/less/app.less', 'public/css');

この状態でコンパイルするとフォントファイルが見つからないエラーが発生しました。
※パスが間違ってる。themesが一つ余分。。

解決方法１（非推奨）

解決方法というか、とりあえずコンパイルを通す方法。
以下のようにする。

webpack.mix.js

const { mix } = require('laravel-mix');
mix.less('resources/assets/less/app.less', 'public/css')
    .options( processCssUrls: false });

デフォルトでは、相対パスで記述されたurl()を書き換えて、ファイルをpublicディレクトリにコピーする挙動の模様。processCssUrlsをfalseにすることで、書き換え（ファイルコピー）をさせなくできるみたい。
とはいえ、手動でCSSに記載された場所へフォントファイルをコピーしないといけないので非推奨。

解決方法２

こっちが本命。フォントのパスを書き換える。
この書き換え方法（対象の変数）を探すのにハマった。
今回はデフォルトのthemeを使用したのだが、その中のsite.variablesファイルにフォントのパスが定義されていた。

resources/assets/less/semantic/src/themes/default/site.variables

/*-------------------
        Paths
--------------------*/

/* For source only. Modified in gulp for dist */
@imagePath : '../../themes/default/assets/images';
@fontPath  : '../../themes/default/assets/fonts';

なので、以下のファイルで定義を上書きすればOK

resources/assets/less/semantic/src/site/globals/site.variables

/*******************************
     User Global Variables
*******************************/

@fontPath  : '../../default/assets/fonts';

以上です。