〇、资源的打包过程
在开始引入 font-awesome 前，我们先了解一下 Laravel 的资源打包过程。
Laravel 使用 laravel-mix 调用 webpack 对资源打包。Mix 基于 webpack 的配置， 所以运行定义于 package.json 文件中的 NPM 脚本，执行 Mix 的编译任务。
例如，npm run dev 根据 package.json 定义，实际执行以下脚本：
"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会自动执行位于 webpack.mix.js中的编译任务：
//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
项目安装在 node_modules/font-awesome
二、修改 app.scss
在 app.scss 中，加入以下内容：
@import "node_modules/font-awesome/scss/font-awesome"
三、编译资源
npm run dev
四、疑难解答
如果 web server 使用 apache，且 document root 位于项目的 public 目录中，那么使用 OK。
如果项目目录是 document rooot 的子目录，font-awesome 则不能正常使用。
原因如下：
webpack 使用 node_modules/laravel-mix/setup/webpack.config.js 作为配置文件。对于 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 下自然是不能找到字体。
因此，解决方法有两个：
- 设置 document root 至 public目录，或使用虚拟主机实现
- 修改
node_modules/laravel-mix/setup/webpack.config.js中 font 的路径。如fonts -> project/public/fonts。
