zoukankan      html  css  js  c++  java
  • react 中引入 ant-design

      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 文件
    			}]
    		  ]
    		}
        }
    
  • 相关阅读:
    JVM相关知识
    面试之mysql专题
    Java新特性
    数据结构操作与算法复杂度分析
    IO流
    浅谈Web安全
    面试题2
    需要知道的HTTP 知识
    How JavaScript Work
    webpack 学习笔记
  • 原文地址:https://www.cnblogs.com/mufc/p/11283444.html
Copyright © 2011-2022 走看看