react 中引入 ant-design

最新推荐文章于 2024-10-08 09:35:10 发布

转载最新推荐文章于 2024-10-08 09:35:10 发布 · 435 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mufc/p/11283444.html

文章标签：

#javascript #ViewUI

本文介绍Ant-Design组件的两种引入方法及其样式加载方式。第一种为单独引入组件与样式，第二种通过配置loader或.babelrc文件进行处理。文章详细展示了如何通过不同方式加载DatePicker组件及样式，适用于React项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　ant-design 的引入有两种方式：

　　　　方式一： import DatePicker from 'antd/es/date-picker' // 加载js

　　　　　　　　 import 'ant/es/date-picker/style/css' // 加载 css

　　　　方式二： import { DatePicker } from 'antd'

　　通过方式二引入 ant-design 的组件，样式可以通过方式一的方式引入，也可以通过配置 loader 或者 .babelrc 文件来处理，这样两种方式的效果其实是一样的；

　　loader 中

                     {
				test: /\.js|.jsx$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-env']
					}
				}
			},

　　.babelrc 中如下配置。其中 presets 是对 es6 的解析配置

{
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "browsers": [
                "> 1%",
                "last 5 versions",
                "ie >= 8"
              ]
            }
          }
        ],
        "@babel/preset-react"
      ],
	  {
		  "plugins": [
			["import", {
			  "libraryName": "antd",
			  "libraryDirectory": "es",
			  "style": "css" // `style: true` 会加载 less 文件
			}]
		  ]
		}
    }

转载于:https://www.cnblogs.com/mufc/p/11283444.html