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 ...
随机推荐
- 简明python教程六----编写一个python脚本
备份程序: #!/usr/bin/python #Filename:backup_ver1.py import os import time source = ['/home/liuxj/python ...
- Appium做Android功能自动化测试
前言 做Android端功能自动化已有2年多的时间了,使用过的功能自动化框架有Robotium.Uiautomator.Appium.最近研究自动化case复用的方案,调研了Appium的自动化框架, ...
- MySQL 多表查询(Day43)
阅读目录 一,介绍 二,多表连接查询 三,符合条件链接查询 四,子查询 五,综合练习 ========================================================= ...
- GIT学习笔记(3):分支管理
GIT学习笔记(3):分支管理 何谓分支 GIT是如何存储数据的 GIT不是存储文件差异或者变化量,而是一系列文件的快照.在Git提交时,会保存一个提交(commit)对象,该对象包含一个指向暂存内容 ...
- springmvc 标签
https://www.baeldung.com/spring-mvc-form-tags 1. Overview In the first article of this series we ...
- bootstrap datatable 参考文档
start:http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/ 扩展 http://issues.wenzhixin.net ...
- Java 基础总结(一)
本文参见:http://www.cnblogs.com/dolphin0520/category/361055.html 1. String,StringBuffer,StringBuilder 1) ...
- javascript Date对象 之 时间转字符串
javascript Date对象 --> 时间转字符串: 测试代码: <!DOCTYPE html> <html lang="en"> <he ...
- hadoop18---socket实现rpc
客户端: package cn.itcast_04_reflect.socket; import java.io.BufferedOutputStream; import java.io.Buffer ...
- 20145109 《Java程序设计》第八周学习总结
Chapter 15 API java.util.logging package The constructor of Logger class is protected. If Logger ins ...