zoukankan      html  css  js  c++  java
  • 5-create-react-app整合antDesign功能

    使用ant-design:

    首先创建react项目:

    create-react-app app

    cd app

    其次

    AntDesign的高级配置:按需导入组件,自定义主题

    1.下载依赖(利用yarn,或者npm都行)

    yarn add react-router-dom    //装路由插件

    yarn add antd   //antd 插件 在 create-react-app 创建的工程中使用 antd

    yarn add react-app-rewired customize-cra    //react-app-rewired (一个对 create-react-app 进行自定义配置的社区解决方案)

    yarn add babel-plugin-import           //babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件

    yarn add less less-loader       //按照 配置主题 的要求,自定义主题需要用到 less 变量覆盖功能。

    2.修改package.json

      "scripts": {

        "start": "react-app-rewired start",

        "build": "react-app-rewired build",

        "test": "react-app-rewired test",

      }

    - 表示要删除的

    + 表示要添加的

     

    3,在项目根目录创建config-overrides.js

    在项目根目录创建一个 config-overrides.js 用于修改默认配置。(js配置文件需要修改)

    module.exports = function override(config, env) {

      // do stuff with the webpack config...

      return config;};

     

    const { override, fixBabelImports, addLessLoader } = require('customize-cra');

    module.exports = override(

      fixBabelImports('import', {

        libraryName: 'antd',

        libraryDirectory: 'es',

        style: true,

      }),

      addLessLoader({

       javascriptEnabled: true,

       modifyVars: { '@primary-color': '#1DA57A' },

     }),

    );

     

  • 相关阅读:
    Ruby编程语言学习笔记1
    SQL SERVER 2008 基础知识
    SQLServer批量插入数据的两种方法
    JQuery基础
    wpf首次项目开发技术总结之access数据库
    wpf首次项目开发技术总结wpf页面
    c#项目开发常见问题
    pl/sql基础
    wpf 开发应用初次总结
    博客园安家
  • 原文地址:https://www.cnblogs.com/wskb/p/11209526.html
Copyright © 2011-2022 走看看