zoukankan      html  css  js  c++  java
  • 二、create-react-app自定义配置

    这里主要讲解添加less  和  实现Antd按需加载

    首选需要执行npm run eject 暴露所有内建的配置 ,这是后面所有配置的基础,这个必须优先执行!

    一、实现Antd按需加载

    按需加载插件。只需要引入模块即可,无需单独引入样式。

    import {Button} from 'antd';
    ReactDom.render(
    <div>
      <Button>
        XXXX
      </Button>
    </div>);

     1. 使用babel-plugin-import实现Antd按需加载,修改package.json,或者在项目根目录新建文件.babelrc写配置,注意是二选一。

    首先执行以下命令安装 babel-plugin-import

    npm install babel-plugin-import --save-dev

    1)、修改package.json

    "babel": {
        "presets": [
          "react-app"
        ],
        "plugins": [
          [
            "import",
            {
              "libraryName": "antd",
              "style": true
            }
          ]
        ]
      }

    2)、修改.babelrc

    {
       "presets": [
          "react-app"
        ],
        "plugins": [
          [
            "import",
            {
              "libraryName": "antd",
              "style": true
            }
          ]
        ]
    }

    注意: 不要认为package.json里已有presets配置这里就不用写,这里的.babelrc会覆盖package.json里带有的babel配置,如果删除presets配置,会报错。

    二、引入Less

    1)安装less-loader 和 less

    npm install less-loader less --save-dev

    2)修改config文件夹下的webpack.config.dev.js和webpack.config.prod.js文件(都需要修改)
    查找 :exclude
    原本的 exclude: [/.js$/, /.html$/, /.json$/],
    修改为 exclude: [/.html$/, /.(js|jsx)$/, /.(css|less)$/, /.json$/, /.bmp$/, /.gif$/, /.jpe?g$/, /.png$/],

    查找:test: /.css$/
    原本的 test: /.css$/,
    修改为 test: /.(css|less)$/,

    在这个test的下面找到use,添加loader

    use: [  
        {...},
        {...},
        {
          loader: require.resolve('less-loader') // compiles Less to CSS
        }
      ]

     参考地址:

    https://blog.csdn.net/zhaoyu_m69/article/details/78800887

    https://segmentfault.com/a/1190000012881473

    https://blog.csdn.net/qq_35809834/article/details/72670220

  • 相关阅读:
    Eclipse中SVN插件的安装方式
    Javascript实现DIV滚动自动滚动到底部
    Android程序开发的环境配置
    Android程序开发基础之——页面布局
    TinyMCE使用手册
    PHP中使用mktime获取时间戳的一个黑色幽默
    VS11本地IIS调试时(URL不使用虚拟目录,直接用localhost)
    [VS扩展工具] Image Optimizer(图像优化压缩)
    [程序安装包制作] Advanced Installer 备忘
    安装VS2010 SP1时遇到WCF RIA Service 版本错误
  • 原文地址:https://www.cnblogs.com/wuqun/p/10120596.html
Copyright © 2011-2022 走看看