antd-iconfont for inner network
npm install antd-iconfont --save
npm install less less-loader --save-dev
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = {
entry: './src/app.jsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/app.js'
},
module: {
rules: [
{
test: /\.js[x]?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react'],
plugins: [
[
"import",
[
{
"libraryName": "antd",
"style": true
}
]
]
]
}
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
use: "css-loader",
fallback: "style-loader"
})
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
use: 'css-loader!sass-loader',
fallback: 'style-loader'
})
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader'
}, {
loader: 'less-loader',
options: {
javascriptEnabled: true,
modifyVars: {
'@icon-url': '"~antd-iconfont/iconfont"',
}
}
}],
fallback: 'style-loader'
})
},
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
use: [{
loader: 'url-loader',
options: {
name: '[path][name].[ext]',
limit: 2000
}
}]
}
]
},
resolve: {
alias: {
node_modules: path.join(__dirname, '/node_modules'),
util: path.join(__dirname, '/src/util'),
component: path.join(__dirname, '/src/component'),
service: path.join(__dirname, '/src/service'),
page: path.join(__dirname, '/src/page'),
styles: path.join(__dirname, '/src/styles')
}
},
devServer: {
port: '8088', //设置端口号
// 路径的配置
historyApiFallback: {
index: '/dist/index.html'
},
proxy: {
'/manage': {
target: 'http://test.happymmall.com/',
changeOrigin: true
},
'/user/logout.do': {
target: 'http://test.happymmall.com/',
changeOrigin: true
},
'/react-api/*': {
target: 'http://localhost:3000',
secure: false
}
}
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'js/base.js'
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
favicon: './favicon.ico'
}),
new ExtractTextPlugin("[name].css"),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
};
1、
plugins: [
[
"import",
[
{
"libraryName": "antd",
"style": true
}
]
]
]
2、
{
test: /\.less$/,
loader: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader'
}, {
loader: 'less-loader',
options: {
javascriptEnabled: true,
modifyVars: {
'@icon-url': '"~antd-iconfont/iconfont"',
}
}
}],
fallback: 'style-loader'
})
}
import "~antd-iconfont/iconfont.less";
import "antd-them_override.less";
antd-iconfont for inner network的更多相关文章
- webpack热更新问题和antd design字体图标库扩展
标题也不知道怎么写好,真是尴尬.不过话说回来,距离上一次写文快两个月了,最近有点忙,一直在开发新项目, 今天刚刚闲下来,项目准备提测.借这个功夫写点东西,把新项目上学到的一些好的干活分享一下,以便之后 ...
- 使用iconfont图标
iconfont.cn基本使用 登录iconfont.cn网站,直接使用github账号即可登录 输入关键字搜索需要的图标,然后在需要的图标上点击'添加入库' 点击网站右上角的购物车图标,查看当前已入 ...
- 2017.11.6 - ant design table等组件的使用,以及 chrome 中 network 的使用
一.今日主要任务 悉尼小程序后台管理开发: 景点管理页面: 获取已有数据列表,选取部分数据呈现在表格中,根据景点名称.分类过滤出对应的景点. 二.难点 1. 项目技术选取: ant design. ...
- Antd前端开发采坑记录
背景 基于页面友好,界面整洁美观:基于Antd框架开发虾能平台 选型 基于Antd-admin工程架构,进行开发:基于Antd+React+Umj 采坑记录 按照Html方式天机onClick方法,每 ...
- antd Icon
引入 : import { Icon } from 'antd'; <Icon type = "home" //图标样式 theme = "filled" ...
- iconfont的使用
首先你要有一个图标库的账号,我们使用的是阿里矢量图标库,其次你要有一套已经设计好的图标原图.如果你具备了这些,就可以和我一起看iconfont的使用姿势了. 写在前面 不结合其他矢量库或UI框架一起使 ...
- antd 离线 icon
讲你下载下来的官方提供的字体库解压后所有文件复制到node-modules/antd/dist目录下 创建新的文件夹iconfont 在你项目生成的css入口文件对应的源码less文件开始添加如下两句 ...
- 使用 dva + antd 快速开发react应用
使用 dva + antd 快速开发react应用 版本说明: 注意:dva的版本是0.9.2 $ node -v v10.2.1 $ npm -v $ dva -v dva-cli version ...
- Recurrent Neural Network系列1--RNN(循环神经网络)概述
作者:zhbzz2007 出处:http://www.cnblogs.com/zhbzz2007 欢迎转载,也请保留这段声明.谢谢! 本文翻译自 RECURRENT NEURAL NETWORKS T ...
随机推荐
- SignalTap II进阶学习
1. 多级触发 有时候我们可能需要利用多个信号(最多10个)依次触发后,观察特定的值.这这时候我们可以增加触发条件来满足我们的需求. 多个触发信号如上图所示,只有依次发生SW[0]上升沿. SW[1] ...
- 简明python教程二-----对象
物理行:是你在编写程序时所看见的. 逻辑行:是Python看见的单个语句. 默认的,python希望每行都只使用一个语句,这样使得代码更加易读. 如果你想要在一个物理行中使用多于一个逻辑行,用分号“: ...
- rails 单数 复数 大写 小写转换 下划线 驼峰命名
downcase 变小写 pluralize 复数 singularize 单数 camelcase 驼峰 underscore : “MyScore”.undersocre ==> my_s ...
- Java面向对象—抽象类和接口
本文引用海子的一篇文章:http://www.cnblogs.com/dolphin0520/p/3811437.html 一.抽象类 在了解抽象类之前,先来了解一下抽象方法.抽象方法是一种特殊的方法 ...
- Kattis - pizzahawaii 【状态标记】
Kattis - pizzahawaii [状态标记] Description You are travelling in a foreign country. Although you are al ...
- linux 搭建 nexus maven私服仓储
一.下载 1.创建下载软件包目录 mkdir /home/install 2.在/home/install下载nexus包,或者将下载好的nexus压缩包上传至/home/install wget ...
- [转]HBase hbck——检察HBase集群的一致性
Hbase提供了hbck命令来检查各种不一致问题.hbck的名字仿效了HDFS的fsck命令,后者是一个用于检查HDFS中不一致问题的工具.下面这段非常易懂的介绍出自于hbck的源程序. 检查数据在M ...
- java连接zookeeper服务器出现“KeeperErrorCode = ConnectionLoss for /test”
昨天调试java连接zookeeper服务器,zookeeper搭建过程在这里不做赘述,在创建连接后,然后操作节点一直报异常 错误信息如下: Exception in thread "mai ...
- HGVS,非HGVS形式的突变描述解释
NG_012232.1(NM_004006.1):c.93+1G>T: 在该转录本NM_004006.1外显子的第93个碱基的下1个碱基(属于内含子)G变为T. NG_012232.1(NM_0 ...
- 20145201《Java程序设计》第九周学习总结
20145201 <Java程序设计>第九周学习总结 教材学习内容总结 JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接口,数据库厂商则对接口进行操作,开发人员无须接触底层 ...