create-react-app 初始化项目+antd填坑

最近在背单词学英语,感觉市面上的单词软件都,所以打算自己写一个移动端的web app网页吧,用react+ant design瞎写写

利用create-react-app初始化项目后,看到package.json里面有下面的东西

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

很明显,start就是跑起来,build就是打包,test是测试,eject查了一下,翻译为弹射的意思,create-react-app会把webpack的配置封装起来,eject就是反编译,把那些全部释放出来,获得webpack的的控制权,但是这是一个不可逆的操作,eject弹射了之后就不能恢复了,但是有时候确实需要修改或者是配置一些东西,于是衍生出了一些方法.

React-app-rewired方案

网上有响应的配置方案,按照步骤设置好后就可以在config-overrides.js里面配置一些东西

例如我想引入less,用less去写css还是十分方便的

/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');

module.exports = function override(config, env) {
   config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
//添加了下面这一段
   config = rewireLess.withLoaderOptions({})(config, env);
    return config;
};