首先感慨下 自己竟然有半年沒登賬戶 ,干嘛去啦? 從剛接觸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 文件的加載規則:
/\.css$/
修改為/\.(css|less)$/
;- 在
use
數組調用的方法中新增一個對象元素{loader: require.resolve('less-loader')}
。
修改完成后,我們就可以在項目中正常使用less了。