React腳手架配置less

2021-10-04 11:57:23 字數 1117 閱讀 2248

安裝完react腳手架以後，是不支援less的，也不支援less的巢狀樣式，需要我們在webpack.config.js中配置一下。

解決的問題

1、全域性安裝

3、進入專案資料夾並啟動

npm start

npm i less less-loader
安裝完腳手架之後，我們在目錄結構中看不到webpack.config.js檔案，這是因為腳手架為了實現「零配置」，會預設把一些通用的指令碼和配置整合到 react-scripts，同時，被其整合的指令碼和配置也會從目錄中消失 ，使目錄也會變得很乾淨。通過下面步驟進行暴露webpack.config.js檔案（版本低的會出現webpack.config.dev.js和webpack.config.prod.js），下面僅是針對webpack.config.js 檔案配置。

npm run eject
注意：執行該命令後會把已構建依賴項、配置檔案和指令碼複製到目錄中。該操作是不可逆轉的，執行完成後會刪除這個命令，只能執行一次。

支援less

const lessregex =


/\.less$/


;const lessmoduleregex =


/\.module\.less$/


;


,'less-loader'),


sideeffects:


true,}


,,},


'less-loader'),


},
解決less巢狀樣式不生效的問題

把下面的**加到webpack中getstyleloaders方法裡css-loader下面

const


getstyleloaders


=(cssoptions,lessoptions, preprocessor)


=>


,}

在React腳手架中啟用Less

參考 執行專案，此時在瀏覽器中即可檢視到 logo 在緩慢轉動。啟用 less 語法編寫 css 新增 less 相關配置 在命令列執行 npm run eject 命令 此命令會將腳手架中隱藏的配置都展示出來，此過程不可逆 執行完成之後，開啟 config 目錄下的 webpack.config....

react腳手架打包的坑

首先看一下打包後的build檔案 相當於靜態資源的根目錄就是public檔案，開發中所需要的或其他資源就放在public資料夾下，比如這裡img檔案中的，在任何元件中可以直接通過 img 1.jpg來獲取1.jpg這張，但是如果通過cnpm run build打包後，用本地路徑就訪問不到該路徑資源了...

react腳手架解決跨域

配置 方法一.axios proxy 找檔案 node modules react scripts config webpackdevserver.config.js 通過正向 去獲取資料，解決跨域問題 proxy 2.改package.json scripts 3.專案根目錄下建立 config ...