node.js - 将 ant-design 与 next.js 集成

Question

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

我已关注 zeit example整合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 设计组件