react+webpack 引入字体图标
在使用react+webpack 构建项目过程中免不了要用到字体图标,在引入过程中报错,不能识别字体图标文件中的@符,报错
Uncaught Error: Module parse failed: Unexpected character '@'
解决办法,修改webpack的配置文件
webpack.config.js
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
},
{
test:/\.less$/,
exclude:/node_modules/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:[
{loader:"css-loader"},
{loader:"less-loader"}
]
}) },
{
test:/\.(woff|svg|eot|ttf)\??.*$/,
use:[
'file-loader'
]
}
不要忘了,在安装extract-text-webpack-plugin后,引入
const ExtractTextPlugin = require('extract-text-webpack-plugin'); plugins:[
new ExtractTextPlugin('src/style/style.css')//字体图标路径
]
最后将字体图标的style.css 文件正常引入到文件中即可
import '../style/style.css'//根据实际路径引进
react+webpack 引入字体图标的更多相关文章
- webpack打包字体图标报错的解决办法
webpack打包字体图标需要两个加载器 url-loader 和 file-loader 另外 字体图标的引入方式 本来应该是 url("....") 这样的方式,但是w ...
- 小程序 components 下的组件引入字体图标时样式不生效
在组件内的样式在引入一遍 字体图标样式, pages 下的组件不受影响,全局引入字体图标样式即刻,不需要再次引入
- VUE引入字体图标库
1. 下载阿里图标 2. 解压文件,并复制文件到VUE项目内 3. 找到添加的字体图标的.css文件,将.iconfont改成[class^="iconfont"], [class ...
- vue中引入字体图标报错,找不到字体文件
在用vue + webpack进行开发的时候,在引用字体图标遇到字体无法加载的问题: 报以下错误 搞了好久没搞定,最后才找到解决方法(还是没有找到原因) 修改字体图标的css中引入字体文件的路径 以前 ...
- react中iconfont字体图标不显示问题
如下图, 写四个圆圈,直接将iconfont的字体编码写在静态HTML结构中时显示没问题,然而明显这样的结构用循环写是更好的选择, 但是,页面上不能显示字体图片了,而是直接显示字体编码 原因是字体编码 ...
- react 使用fortawesome字体图标
fontawesome 官方使用教程=>点我 npm i --save @fortawesome/fontawesome-svg-core@prerelease \ npm i --save @ ...
- react使用阿里字体图标
1. 在react项目的public文件夹下面创建iconfont文件夹,将下载的文件放到iconfont文件夹下 2.在public文件夹下的index.html引入iconfont.css,如 & ...
- vue-cli创建的项目打包成app引入字体图标的问题
将项目在手机端调试时,发现引入的阿里图标显示不出来,需要在引入的iconfont.css文件夹里给url加上https
- react+antd引入 阿里图标
import iconfont from '../../../../assets/fonts/iconfont.js' const Iconfont = Icon.createFromIconfont ...
随机推荐
- java背包的数组实现,链表实现
数组实现 package base.structure; import java.lang.reflect.Array; import java.util.Iterator; /** * @progr ...
- python连接mysql数据库遇到的问题
1.源代码: from sqlalchemy import create_engine from sqlalchemy.orm import sessionmaker from sqlalchemy ...
- va_list arg_list va_start(arg_list, format) va_end( arg_list ) 原理的理解
void log( int log_level, const char* file_name, int line_num, const char* format, ... ) { .......... ...
- Linux下Tomcat启动关闭命令
1.首先,进入Tomcat下的bin目录 cd /usr/local/tomcat/bin 2.查看Tomcat是否以关闭 ps -ef|grep tomcat 如果显示以下信息,说明Tomcat还没 ...
- Transition FrameWork
Android Transition Framework可以实现三种效果: 不同Activity之间切换时,Activityc的内容(contentView)转场动画 不同Activity之间切换时, ...
- 安卓压力测试之monkey
步骤: 1.把要测试的apk包放在 SDK-platfrom-tools下 2.配置adb.exe的环境变量 3.手机连接上电脑(虚拟机和真机只能连接一个) 4.运行:adb devices 查看 ...
- 【防火墙】DMZ
DMZ是英文“demilitarized zone”的缩写,中文名称为“隔离区”,也称“非军事化区”.它是为了解决安装防火墙后外部网络的访问用户不能访问内部网络服务器的问题,而设立的一个非安全系统与安 ...
- jq学习总结之方法
三.方法 1.length 2.index()3.get() reverse()4.not()5.filter()6.find()7.each()8.addBack()9.attr()10.toggl ...
- C#使用进度条,并用线程模拟真实数据 ProgressBar用法(转)
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- Hibernate课程 初探一对多映射5-1 课程总结
1 单方一对多 xml one-to-many 配置 实体类 一方添加保存多方集合 2 单方多对一 xml many-to-one 配置 实体类 多方添加保存一方引用 3 常用属性 inver ...