react中webpack.config.js配置lessless-loader less

Leon Aries發表於2019-03-01

這是我第一次配置這些,沒有學過webpack,出過很錯,還好後來都一一改正。我覺得我遇到的大部分問題就是版本更新了,和老師教的時候用的有一些不一樣,但是我想盡量不要去直接將那些包的版本降低,最好還是使用高版本的包。

1.安裝less-loader和less,語句:yarn add less-loader less 或者 npm install less-loader less

2.在專案終端使用:yarn run eject

暴露webpack (如果問是否要暴露,輸入y就行了)

3.在編譯器的專案資料夾中會多出來config檔案,檔案目錄下會有webpack.config.js檔案(版本低的會出現webpack.config.dev.js和webpack.config.prod.js,這種的配置方法百度上挺多的,我這裡就只記錄一下webpack.config.js)


react中webpack.config.js配置lessless-loader less

4.點開webpack.config.js檔案(我也不知道里面寫的是什麼)現在要修改裡面的內容了

1)https://ant.design/docs/react/customize-theme-cn是antD的主題定製頁面,我覺得裡面的方法應該算是最新的

react中webpack.config.js配置lessless-loader less

2)點開連結可以找到這樣的一段程式碼,將大的綠框出來的程式碼貼上複製出來,在webpack.config.js找到和這段被複制的程式碼格式差不多的地方,貼上這段程式碼(注意這段程式碼要用{}包起來),紅框的地方是用來做定製主題的,所以裡面程式碼看專案需不需要了


react中webpack.config.js配置lessless-loader less

儲存後再重啟,less就配置好了,就可以在專案中使用.less檔案了。



相關文章