使用 antd#
通过 npm 安装 antd和 babel-plugin-import。babel-plugin-import是用来按需加载 antd 的脚本和样式的，详见 repo 。
$ npm install antd babel-plugin-import --save编辑 .roadhogrc，使 babel-plugin-import 插件生效。
"extraBabelPlugins": [
\- "transform-runtime"
\+ "transform-runtime",
\+ ["import", { "libraryName": "antd", "style": "css" }]
],
或者在package.json配置
"license": "MIT",
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
],
"devDependencies": {
"@ersinfotech/merge": "^1.0.0",
"babel-cli": "^6.22.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-plugin-import": "^1.1.0",
"babel-plugin-lodash": "^3.2.11",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.22.0",
"babel-register": "^6.22.0",
"babel-runtime": "^6.22.0",
"bcryptjs": "^2.4.0",
"bluebird": "^3.4.7",
"body-parser": "^1.16.0",
"colors": "^1.1.2",
"compression": "^1.6.2",
"connect-flash": "^0.1.1",
"connect-mongo": "^1.3.2",
"cors": "^2.8.1",
"cron": "^1.2.1",
"css-loader": "^0.26.1",
"del": "^2.2.2",
"es6-promise": "^4.0.5",
"eslint": "^3.15.0",
"eslint-plugin-babel": "^4.0.1",
"eslint-plugin-react": "^6.9.0",
"express": "^4.14.1",
"express-session": "^1.15.0",
"extract-text-webpack-plugin": "^2.0.0-rc.3",
"file-loader": "^0.10.0",
"gulp": "github:gulpjs/gulp#4.0",
"gulp-imagemin": "^3.1.1",
"happypack": "^3.0.2",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.4",
"husky": "^0.13.1",
"imagemin-pngquant": "^5.0.0",
"isomorphic-fetch": "^2.2.1",
"jwt-simple": "^0.5.1",
"less": "^2.7.2",
"less-loader": "^2.2.3",
"log4js": "^1.1.0",
"marked": "^0.3.6",
"mobx-react-devtools": "^4.2.11",
"mongoose": "^4.8.1",
"morgan": "^1.7.0",
"nodemailer": "^3.0.1",
"nodemon": "^1.11.0",
"opn": "^4.0.2",
"passport": "^0.3.2",
"request": "^2.79.0",
"rimraf": "^2.5.4",
"sha1": "^1.1.1",
"shell-task": "^1.0.0",
"style-loader": "^0.13.1",
"ts-loader": "^2.0.0",
"typescript": "^2.1.5",
"typings": "^2.1.0",
"webpack": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.16.1"
},
"dependencies": {
"@types/react": "^15.0.6",
"@types/react-dom": "^0.14.22",
"@types/react-router": "^3.0.0",
"antd": "^2.8.1",
"babel-polyfill": "^6.22.0",
"echarts": "^3.4.0",
"font-awesome": "^4.7.0",
"highlight.js": "^9.9.0",
"lodash": "^4.17.4",
"mobx": "^3.1.0",
"mobx-react": "^4.1.0",
"moment": "^2.17.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router": "^3.0.2",
"wangeditor": "^2.1.23",
"yrui": "^0.8.10"
}
- 引入antd之后没有样式的问题
在index.js中加入import 'antd/dist/antd.min.css';
