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的更多相关文章

  1. webpack热更新问题和antd design字体图标库扩展

    标题也不知道怎么写好,真是尴尬.不过话说回来,距离上一次写文快两个月了,最近有点忙,一直在开发新项目, 今天刚刚闲下来,项目准备提测.借这个功夫写点东西,把新项目上学到的一些好的干活分享一下,以便之后 ...

  2. 使用iconfont图标

    iconfont.cn基本使用 登录iconfont.cn网站,直接使用github账号即可登录 输入关键字搜索需要的图标,然后在需要的图标上点击'添加入库' 点击网站右上角的购物车图标,查看当前已入 ...

  3. 2017.11.6 - ant design table等组件的使用,以及 chrome 中 network 的使用

    一.今日主要任务 悉尼小程序后台管理开发: 景点管理页面: 获取已有数据列表,选取部分数据呈现在表格中,根据景点名称.分类过滤出对应的景点.   二.难点 1. 项目技术选取: ant design. ...

  4. Antd前端开发采坑记录

    背景 基于页面友好,界面整洁美观:基于Antd框架开发虾能平台 选型 基于Antd-admin工程架构,进行开发:基于Antd+React+Umj 采坑记录 按照Html方式天机onClick方法,每 ...

  5. antd Icon

    引入 : import { Icon } from 'antd'; <Icon type = "home" //图标样式 theme = "filled" ...

  6. iconfont的使用

    首先你要有一个图标库的账号,我们使用的是阿里矢量图标库,其次你要有一套已经设计好的图标原图.如果你具备了这些,就可以和我一起看iconfont的使用姿势了. 写在前面 不结合其他矢量库或UI框架一起使 ...

  7. antd 离线 icon

    讲你下载下来的官方提供的字体库解压后所有文件复制到node-modules/antd/dist目录下 创建新的文件夹iconfont 在你项目生成的css入口文件对应的源码less文件开始添加如下两句 ...

  8. 使用 dva + antd 快速开发react应用

    使用 dva + antd 快速开发react应用 版本说明: 注意:dva的版本是0.9.2 $ node -v v10.2.1 $ npm -v $ dva -v dva-cli version ...

  9. Recurrent Neural Network系列1--RNN(循环神经网络)概述

    作者:zhbzz2007 出处:http://www.cnblogs.com/zhbzz2007 欢迎转载,也请保留这段声明.谢谢! 本文翻译自 RECURRENT NEURAL NETWORKS T ...

随机推荐

  1. spawn 和 exec 的区别(转载)

    众所周知,Node.js在child_process模块中提供了spawn和exec这两个方法,用来开启子进程执行指定程序.这两个方法虽然目的一样,但是既然Node.js为我们提供了两个方法,那它们之 ...

  2. Angular路由参数传递

    一.路由时传递参数的方式 1.在查询参数中传递数据 //页面 <a routerLink="/product" [queryParams]="{id:1}" ...

  3. JetBrains ReSharper 8.2 Build 8.2.0.2160 && StyleCop

    先安装 StyleCop 再安装 JetBrains ReSharper 8.2 Build 8.2.0.2160

  4. cas无缝单点登录(原创)

    之前一直有一个问题残绕着自己,今天,终于很粗糙的解决了这个问题. 众所周知,按照cas单点登录,默认情况下,在不登录的情况下,打开网站是必须要跳转到登录页面的.那有什么方法可以控制吗,当然有,很简单, ...

  5. Tomcat 安装、配置与部署

    Tomcat的官方网站:http://tomcat.apache.org/,目前最新版本为7.0. Tomcat下载地址: 1.32位:http://mirrors.tuna.tsinghua.edu ...

  6. day11 函数和命名空间

    # def my_sum(*args):# sum_2=0# for i in args:# sum_2+=i# return sum_2### ret=my_sum(1,2,3,4)# print( ...

  7. 【Head First Servlets and JSP】笔记2:MVC迷你教程

    1.采用MVC,不仅要求业务逻辑和表示分离.实际上,业务逻辑甚至根本不知道表示的存在.MVC的关键是,业务逻辑要与表示分离,而要求在中间放上别的东西,这样业务逻辑本身就可以作为一个可以重用的Java类 ...

  8. 机器学习中的numpy库

            日常学习中总是遇到数据需要处理等问题,这时候我们就可以借助numpy这个工具来做一些有意思的事. 1.生成随机数的几种方式 x=np.random.random(12) ###生成12 ...

  9. HTML5侧滑聊天面板

    在线演示 本地下载

  10. python中set的用处

    python中有很多不同的数据结构,比如list,tuple,set,dic等,为什么我要单独讲set呢. 因为set是一个比较容易被遗忘的数据结构,不光在python中,在C++中也一样,反正我是很 ...