• 安裝依賴

  #安裝react-app-rewired修改配置create-react-app專案配置
  $ npm install --save-dev react-app-rewired

  #載入less樣式
  $ npm install --save react-app-rewire-less

  #使用antd官方的方式，安裝babel-plugin-import
  $ npm install --save-dev babel-plugin-import

• 專案根目錄下生成 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 = injectBabelPlugin(['wrapper', {}], config);
      config = rewireLess.withLoaderOptions({
          modifyVars: { "@primary-color": "#1DA57A" },
      })(config, env);
      return config;
  };
   
  

• 更新package.json指令碼，如下：

// package.json
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
},

• 最後新增less依賴，

$ npm install --save [email protected]^2.7.2

 此時在使用antd元件時不需要手動引入antd的css樣式，並且可以在專案中使用less樣式檔案。