美文网首页
antd包引入

antd包引入

作者: Ysj1111 | 来源:发表于2017-08-07 15:34 被阅读605次

使用 antd#

  1. 通过 npm 安装 antd和 babel-plugin-import。babel-plugin-import是用来按需加载 antd 的脚本和样式的,详见 repo
    $ npm install antd babel-plugin-import --save

  2. 编辑 .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"
  }
  1. 引入antd之后没有样式的问题
    在index.js中加入import 'antd/dist/antd.min.css';

相关文章

网友评论

      本文标题:antd包引入

      本文链接:https://www.haomeiwen.com/subject/lxhmtxtx.html