webpack之项目中引入字体

前言:

本文演示了

  • 如何在项目中应用字体图标;
  • 用到的loader: file-loader


正文:

在common下面新建fonts文件夹,并在其中加入我们手动下载好的字体文件(这里使用开源项目Ionicons):

webpack之项目中引入字体_第1张图片

编辑我们的style/main.css文件。

webpack之项目中引入字体_第2张图片

在app.js中引入main.css文件:

webpack之项目中引入字体_第3张图片

这里根据以往经验,我们知道这里需要一个loader来处理我们的字体图标。

这里,我们需要loader帮我们做两件事:

1、将我们的字体图标文件移到我们的dist目录下。

2、将我们的css文件中引用的字体图标的路径进行相对应的更改。

以上两点也正是file-loader帮我们做的事情,所以配置我们的webpack.config.js文件:

webpack之项目中引入字体_第4张图片

npm run build 查看效果。


那么,如何引用npm直接下载字体图标库

用npm直接下载字体图标库。

npm i -S ionicons

在app.js中引入样式文件

webpack之项目中引入字体_第5张图片

npm run build 预览效果。

注:npm install的时候尽量的不要用cnpm,会出现问题,在node_modules下面找不到相关模块。



你可能感兴趣的:(webpack)