zoukankan      html  css  js  c++  java
  • antd----react css框架

    安装  npm install antd --save

    1.安装依赖:npm install react-app-rewired customize-cra babel-plugin-import less less-loader
                2.修改package.json
                        ....
                            "scripts": {
                                "start": "react-app-rewired start",
                                "build": "react-app-rewired build",
                                "test": "react-app-rewired test",
                                "eject": "react-scripts eject"
                            },
                        ....
                3.根目录下创建config-overrides.js
                        //配置具体的修改规则
                        const { override, fixBabelImports,addLessLoader} = require('customize-cra');
                        module.exports = override(
                            fixBabelImports('import', {
                                libraryName: 'antd',
                                libraryDirectory: 'es',
                                style: true,
                            }),
                            addLessLoader({
                                lessOptions:{
                                    javascriptEnabled: true,
                                    modifyVars: { '@primary-color': 'green' },
                                }
                            }),
                        );
                    4.备注:不用在组件里亲自引入样式了,即:import 'antd/dist/antd.css'应该删掉
                     import { Button,DatePicker } from 'antd';
                     import {WechatOutlined,WeiboOutlined,SearchOutlined} from '@ant-design/icons'
                     const { RangePicker } = DatePicker;
  • 相关阅读:
    职场利器:说服力书籍排行榜
    经商必读的6本书推荐
    有关企业文化的书籍推荐
    创业书籍推荐
    企业文化建设的基本内容和主要步骤
    沟通书籍排行榜推荐
    企业文化建设案例与方案分享
    如何提高个人领导力?
    Project Recording: Date and Factory Date[转载]
    SAP Control framework–实例
  • 原文地址:https://www.cnblogs.com/sunmarvell/p/14454121.html
Copyright © 2011-2022 走看看