creat-react-app搭建的項目中按需引入antd以及配置Less和如何修改antd的主題色

在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文件:

.button{ 2  margin: 100px; 3 }

 

 效果圖: