从零开始 React + Antd + less + mobx

1. 参考Antd官网，create-react-app，yarn add antd

react版本 16.4.2 ， antd版本 3.8.0

https://ant.design/docs/react/use-with-create-react-app-cn

 

2. Antd 按需加载

官网推荐使用 react-app-rewired （一个对 create-react-app 进行自定义配置的社区解决方案）

但是在2.x版本的antd推荐使用 yarn run eject将配置暴露出来，由于后续还需要修改配置，因此选择npm run eject 这种方法。

(1) 使用 babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件

      yarn add babel-plugin-import --dev 

(2) 运行 yarn run eject ,暴露出所有的配置文件

(3) 在package.json文件中加入如下配置

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

在这里"style"选择的是"css"，后续引入less的时候改为 true 即可。

至此，使用 import {Button} from 'antd'，即可按需加载，且包含样式。

 

3. 引入less

(1) 安装less，less-loader

注意：less3.0以上版本会与Antd冲突，需要需要安装2.x版本

npm install less@2.7.3 --save-dev

npm install less-loader --save-dev

(2) 将第2步按需加载中的"css"改为true

(3)将config.dev，config.prod的代码修改如下

          {
            test: /\.(css|less)$/, //关键句1
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
              {
                loader: require.resolve('less-loader') // 关键句2
              }
            ],
          }

4.引入mobx

https://blog.csdn.net/qq499576783/article/details/79500713