1、安装font-awesome和font-awesome-loader及依赖

git：https://github.com/shakacode/font-awesome-loader

npm install font-awesome-loader less less-loader css-loader style-loader file-loader font-awesome -save

2、配置webpack

官方给出的webpack2.0配置如下：

但是实际上会出现如下错误：

解决办法：

3、使用（pug）

i(class='fa fa-comments' slot="icon" )

转载于:https://www.cnblogs.com/mybky/p/7098452.html

webpack之font-awesome相关推荐

使用uni-app引入阿里巴巴矢量图以及出现小长方形解决方法
首先就是下载阿里巴巴矢量图,不知道怎么用的可以去看一下这篇文章webpack打包font文字目录下的06篇如果是在pages.json文件下引入图标可以使用第一种(Unicode)引入引入时需要把 ...
React with Webpack - 3: 内联image、font
React with Webpack - 3: 内联image.font 内联image 一直到 HTTP/2 版本,你才能在WEB应用加载的时候避免建立太多 HTTP 请求.根据你的浏览器,你有一个 ...
Vue——10 - webpack打包保姆级教程01——打包js、json、css、less、html、背景图片以及图片、字体（Font）文件，devsever，生产环境配置以及css的兼容写法
目录一.webpack打包JS文件 1.新建入口文件index.js和mathUtils.js,index.js是依赖于mathUtils.js 2.然后使用webpack命令打包js文件二.打包 ...
Webpack 资源管理
资源管理提示: 版本问题本文基于 webpack 2.x 版本.webpack 2.x 相比 webpack 1.x 有重大改变.所以,如果你的项目中已使用了 webpack 1.x ,本教程的示 ...
[转]WebPack 常用功能介绍
概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...
【vue】webpack打包vue项目并且运行在Tomcat里面
在package.json里面是script加入脚本 "publish": " webpack --config webpack.publish.config.js -p ...
webpack 使用别名（resolve.alias）解决scss @import相对路径导致的问题
webpack.conf.js 中 resolve.alias 配置 resolve: {extensions: ['.js', '.vue'],alias: {'@': path.resolve(_ ...
webpack 单页面应用实战
这篇文章将介绍如何利用 webpack 进行单页面应用的开发,算是我在实际开发中的一些心得和体会,在这里给大家做一个分享.webpack 的介绍这里就不多说了,可以直接去官网查看. 关于这个单页面应用 ...
Webpack核心概念解析
原文链接:banggan.github.io/2019/05/09/- Webpack核心概念解析终于忙完了论文,可以愉快的开始学习了,重拾起重学前端.webpack以及Vue的源码解读作为入职前的 ...
webpack 读取文件夹下的文件_TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建...
1.TypeScript完全解读-开发环境搭建初始化项目手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目然后我们的项目 ...

webpack之font-awesome

1、安装font-awesome和font-awesome-loader及依赖

2、配置webpack

3、使用（pug）

webpack之font-awesome相关推荐

最新文章

热门文章