在creat-react-app搭建的專案環境中按需引入antd以及配置less,首先需要暴露出來webpack檔案。(此操作不可逆)。

create-react-app myapp 建立同一個react專案

yarn add antd less less-loader babel-plugin-import 需要配置的 less 和 babel依賴

暴露wenpack檔案的指令是yarn eject.  在使用這個指令之前要先推送一次git檔案才行。或者刪除git檔案。

提交git :

git add .

git commit -m 'xxxx'

git push
 

然後再yarn eject

執行之後會詢問是否暴露，輸入y即可。

此時在專案目錄下會多出一個config資料夾。，

當你執行專案的時候你會發現報錯 ： 缺少@babel/plugin-syntax-jsx檔案

//執行命令 
yarn add @babel/plugin-syntax-jsx

然後在config資料夾裡面找webpack.config.js檔案在大概345行處新增程式碼

['import',{libraryName:'antd', style:true}],

在大概455行處新增程式碼

 {
              test: /\.less$/,
              use: [{
                  loader: "style-loader" 
              }, {
                   loader: "css-loader" 
              }, {
                  loader: "less-loader",
                  options: {
                      sourceMap: true,
                      modifyVars: {
                          '@primary-color': '#f9c700',　　//修改antd主題色
                      },
                      javascriptEnabled: true,
                  }
              }]
          },

然後重啟專案，就可以按需引入antd、引入less檔案了。並且主題色也變為了修改的#f9c700色。

引入一個Button按鈕來舉個例子:

App.js檔案:

import React from 'react';
import { Button } from 'antd'
import './app.less'
function App() {
  return (
    <div>
      <Button className="button" type="primary">按需引入antd和配置less</Button>
    </div>
  );
}

export default App;

app.less檔案:

1 .button{
2     margin: 100px;
3 }

 效果圖:

&n