zoukankan      html  css  js  c++  java
  • 19 React——Ant Design(按需加载样式文件)

          在上篇文章中我们简单介绍了Ant Design组件的使用,但是在使用过程中我们在样式文件中直接加载了全部的Antd样式文件,这对于前端页面来说并不符合其开发要求,接下来我们介绍css样式文件的按需加载。

    1 首先,我们需要在项目文件中安装自定义配置的工具。在项目文件夹中打开命令行工具,输入“npm install react-app-rewired --save”,如图:

    2 然后修改package.json文件中的配置,如图:

    3 修改完配置后在项目的根目录下新建一个名为“config-overrides.js”文件,先不要在此文件中添加任何代码,放置在此处。

    4 然后安装按需加载组件代码和样式的babel插件。在命令行中输入“npm install babel-plugin-import --save”如图:

    5 最后,在刚才新建的js文件中添加如下的代码,如图:

    const { injectBabelPlugin } = require('react-app-rewired');
    module.exports = function override(config, env) {
        config = injectBabelPlugin(
            ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
    config,
        );
        return config;
    };

    6 我们删除之前在index.css文件头部添加的“@import '~antd/dist/antd.css';”这行代码,重新启动项目。如图:

    7 此时,按需加载环境已经配好,我们需要组件时,只需在相关文件中引入此组件的包,然后实例化此组件即可。例如,我们在主页组件中添加一个卡片,我们只需引入Card的包,然后粘贴官网代码即可,并不需要在引入css样式那些,因为在引入的包中自带了样式代码,并且仅仅自带了卡片的样式代码,这就是按需加载,大大降低了浏览器的承载力,如图:

    X北辰北的博客,想看更多内容,请移步我的个人博客:http://www.xbeichenbei.com/
  • 相关阅读:
    DQL、DML、DDL、DCL的概念与区别
    TeamViewer
    构建属于自己的ORM框架之二--IQueryable的奥秘
    某考试 T2 sum
    某考试 T1 line
    bzoj 2153: 设计铁路
    [SCOI2010]序列操作
    [SCOI2010]字符串
    [SCOI2010]传送带
    bzoj 2694: Lcm
  • 原文地址:https://www.cnblogs.com/xuqw/p/11794642.html
Copyright © 2011-2022 走看看