〇、資源的打包過(guò)程

在開(kāi)始引入 font-awesome 前，我們先了解一下 Laravel 的資源打包過(guò)程。

Laravel 使用 laravel-mix 調(diào)用 webpack 對(duì)資源打包。Mix 基于 webpack 的配置， 所以運(yùn)行定義于 package.json 文件中的 NPM 腳本，執(zhí)行 Mix 的編譯任務(wù)。

例如，npm run dev 根據(jù) package.json 定義，實(shí)際執(zhí)行以下腳本：

"dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

webpack會(huì)自動(dòng)執(zhí)行位于 webpack.mix.js中的編譯任務(wù)：

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

所以，我們引入 font-awesome，只需修改 app.scss 即可。

一、安裝 font-awesome

npm install --save font-awesome

項(xiàng)目安裝在 node_modules/font-awesome

二、修改 app.scss

在 app.scss 中，加入以下內(nèi)容：

@import "node_modules/font-awesome/scss/font-awesome"

三、編譯資源

npm run dev

四、疑難解答

如果 web server 使用 apache，且 document root 位于項(xiàng)目的 public 目錄中，那么使用 OK。

如果項(xiàng)目目錄是 document rooot 的子目錄，font-awesome 則不能正常使用。
原因如下：
webpack 使用 node_modules/laravel-mix/setup/webpack.config.js 作為配置文件。對(duì)于 font-awesome 的字體文件，處理 rule 如下：

        {                                                                                                                                                    
            test: /\.(woff2?|ttf|eot|svg|otf)$/,                                                                                                             
            loader: 'file-loader',                                                                                                                           
            options: {                                                                                                                                       
                name: 'fonts/[name].[ext]?[hash]',                                                                                                 
                publicPath: Mix.resourceRoot                                                                                                                 
            }                                                                                                                                                
        },                                                                                                                                                   

因此生成的 css 文件，font 的路徑如下：

@font-face {
  font-family: 'FontAwesome';
  src: url(/fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713);
  src: url(/fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713) format("embedded-opentype"), url(/fonts/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e) format("woff2"), url(/fonts/fontawesome-webfont.woff?fee66e712a8a08eef5805a46892932ad) format("woff"), url(/fonts/fontawesome-webfont.ttf?b06871f281fee6b241d60582ae9369b9) format("truetype"), url(/fonts/fontawesome-webfont.svg?912ec66d7572ff821749319396470bde) format("svg");
  font-weight: normal;
  font-style: normal;
}

在 <document root>/fonts 下自然是不能找到字體。

因此，解決方法有兩個(gè)：

1. 設(shè)置 document root 至 public目錄，或使用虛擬主機(jī)實(shí)現(xiàn)
2. 修改 node_modules/laravel-mix/setup/webpack.config.js 中 font 的路徑。如 fonts -> project/public/fonts。