〇、资源的打包过程
在开始引入 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
。
网友评论