将 ant-design 与 next.js 集成

Question

我正在尝试ant-design与next.js. 我已安装next在默认节点项目中，而不是使用create-next-app.

我跟随时代周报例如整合next有antd。

我的 package.json 文件是

{
  "name": "crowd-funding",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next dev"
  },
  "author": "Thananjaya Chakravarthy S",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "antd": "^3.13.6",
    "next": "^4.1.4",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",

  },
  "devDependencies": {
    "babel-plugin-import": "^1.11.0"
  }
}

我的.babelrc文件是

{
    "presets": ["next/babel"],
    "plugins": [
      ["import", { "libraryName": "antd", "style": "css" }]
    ],
}

但是我收到了一个错误，比如You may need an appropriate loader to handle this file type指向路径/node_modules/antd/dist/antd.css。

如何解决这个问题？

Answer 1

创建styles.css文件

在styles.css中：

@import "~antd/dist/antd.css";

在 _app.js 中：

import "./styles.css";

现在您可以在项目的任何位置使用 ant 设计组件