1.新建

npx create-react-app react-ts --typescript
# or
yarn create react-app react-ts  --typescript

之前都是運(yùn)行npm run eject暴露所有webpack配置來(lái)添加less，研究了一下antd發(fā)現(xiàn)了一個(gè)新方法

2.antd

yarn add antd

在index.css頂部引入antd/dist/antd.css，一般都是把App文件都刪了

@import '~antd/dist/antd.css';

3.自定義配置，按需加載antd組件樣式

yarn add react-app-rewired customize-cra

修改package.json

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

在根目錄創(chuàng)建config-overrides.js用于修改默認(rèn)配置

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

4.使用babel-plugin-import

按需加載組件代碼和樣式的babel插件

yarn add babel-plugin-import

修改config-overrides.js配置文件

const {override, fixBabelImports} = require('customize-cra');
module.exports = override(
    fixBabelImports('import',{
        libraryName:'antd',
        libraryDirectory:'es',
        styles:'css'
    })
)

5.自定義主題（less)

yarn add less less-loader

修改config-overrides.js配置文件

const { override, fixBabelImports, addLessLoader } = require("customize-cra");
module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    styles: "true"
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { "@primary-color": "#1DA57A" }
  })
);

6.less模塊化

沒(méi)成功
在react-app-env.d.ts配置

declare module "*.module.less" {
  const classes: { [key: string]: string };
  export default classes;
}

報(bào)錯(cuò)

7. 加入redux

8.或加入mobx(4.0兼容ie11)