如何在經過腳手架create-react-app 建立的react項目中配置 less

首先感慨下 本身居然有半年沒登帳戶 ，幹嗎去啦？ 從剛接觸vue 接手作兩次版本以後 又讓我這個小菜雞 開始開發react項目，連react生命週期還沒搞明白的時候 就開始進行初版本的開發了，第一個版本是一個基礎配置項目，從開始到結束 都是濛濛的，上手好難，好在有人帶着了第一個項目，通過第一個版本的摧殘 ，從第二個到後來的版本 慢慢的從很是緊張到相對鬆一些的節奏 ，感謝同事們的幫助呢，好啦 廢話不説啦！

 

如何在create-react-app建立的項目下配置less，其實很簡單，只是create-react-app建立的項目沒有暴露webpack相關配置，因此須要暴露出webpack相關配置，具體操做以下：

一，暴露webpack配置文件config

在create-react-app建立的項目下是不支持less的，咱們要使用less就須要在相關配置文件中配置。 官方腳手架爲了實現「零配置」，會默認把一些通用的腳本和配置集成到 react-scripts，被其集成的腳本和配置會從程序目錄中消失（ webpack 相關配置文件） 。

因此經過命令

npm run eject  

該命令只能執行一次而且 不可逆，執行後，項目中會多一個config文件。

在新建一個項目後，執行這個命令的時候，有可能會趕上如下報錯：

是須要經過git  提交下代碼 能夠經過如下命令 進行操做：

二，安裝less\less-loader依賴

可能會由於網絡問題 安裝不成功，能夠試試熱點 或者是鏡像安裝

 三，修改 webpack 配置

在webpack.config.js文件中找到關於 css 文件的加載規則：

1. /\.css$/ 修改成 /\.(css|less)$/；                                                                        
2. 在use數組調用的方法中新增一個對象元素{loader: require.resolve('less-loader')}。

    

 修改完成後，咱們就能夠在項目中正常使用less了。