create-react-app 初始化 AntD 项目

基础插件安装，Less 文件加载配置

安装所需的插件：

• 安装 React-Router、Axios
• 安装 AntD
• 暴露 Webpack 配置
• 安装 less-loader（AntD 使用 less 开发）
• 修改 less-loader

npm install -g yarn（用npm全局安装yarn）
yarn --version（1.19.1）
yarn global add create-react-app@1.5.2（用yarn全局安装create-react-app）

create-react-app imoocmanager（初始化项目）
cd imoocmanager
yarn remove react react-dom react-scripts
yarn add react@16.3.2 react-dom@16.3.2 react-scripts@1.1.4
yarn add react-router-dom@4.2.2（安装新的 react-router）
yarn add axios@0.18.0 less-loader@4.1.0 

此时 package.json：

{
  "name": "imoocmanager",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "0.18.0",
    "less-loader": "4.1.0",
    "react": "16.3.2",
    "react-dom": "16.3.2",
    "react-router-dom": "4.2.2",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

暴露隐藏的配置（不可逆过程）：

yarn run eject

这是 Webpack 原本对CSS的处理：

          {
            test: /\.css$/,
            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',
                    }),
                  ],
                },
              },
            ],
          },

在 webpack.config.dev.js module.rules 中对 css 处理的后边添加对 less 的配置：

          {
            test: /\.less$/,
            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'),
                options: {
                  
                }
              }
            ],
          },

安装 babel-loader：

yarn add babel-loader@7.1.2

将 App.js 中引入 css 改为引入 less：

import './App.css'; -> import './App.less';

yarn start 启动项目报错，提示没有模块 less，则需要安装 less，安装后重启即正常：

yarn add less@2.7.3

安装 antd：

yarn add antd@3.4.3 babel-plugin-import@1.7.0（antd 文档推荐使用，可以按需加载组件代码和样式）

antd 文档使用的是不暴露 Webpack 配置的方式设置按需加载，这里暴露了配置需要进行不同的配置，修改webpack.config.dev.js 中 module.rules 的部分：

          // Process JS with Babel.
          {
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
            },
          },

改为：

          // Process JS with Babel.
          {
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              plugins:[
                ["import",[{
                    libraryName:"antd",
                    style:true, // babel-loader 将 antd 导入到 style 中
                }]],
              ],              
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
            },
          },

App.js 中引入 antd 中的蓝色按钮 Button：

import React from 'react';
import logo from './logo.svg';
import './App.less';
import {Button} from 'antd'; // ----------------------------------

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <Button type="primary">Primary</Button>{/* ---------------------------------- */}
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

修改 antd 主题：

暴露 Webpack 配置后，参考 antd 文档 https://ant.design/docs/react/customize-theme-cn 修改主题

webpack.config.dev.js less-loader 中添加配置：

          {
            test: /\.less$/,
            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'),
                options: {
                  // 添加------------------------------------
                  modules:false,
                  modifyVars:{
                    "@primary-color":"#f9c700",
                  },                  
                  // ------------------------------------
                }
              }
            ],
          },   

重启项目后，之前的蓝色按钮变为黄色