1.建立專案

通過腳手架搭建的環境中，預設支援的是CSS和Sass/Scss，需要自己配置Less

#通過React腳手架建立專案
npx create-react-app ‘專案名’

2. 執行命令

# 建立完專案直接執行命令
npm run eject

注意：如果我們修改了檔案，npm run eject會報錯。

解決1：此時只需開啟檔案根目錄，顯示隱藏檔案，刪除.git資料夾，再次執行即可。

解決2：還可以使用Git語法，首先git add .，然後git commit -m '此次提交的註釋'，再次npm run eject即可。

3. 安裝依賴

npm i -D less less-loader
 

4. 修改webpack配置檔案

在webpack.config.js中，找到如圖所示的程式碼段：

複製sass程式碼片段，然後更改為less

然後選中sassRegex，ctrl + F查詢下一處。然後會找到關於sass的兩段配置，複製兩段sass配置，然後將所有的sass更改為less

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'less-loader'
  ),
},
 

人生人山人海人來人往，自己自尊自愛自由自在。

本文來自部落格園，作者：青檸i，轉載請註明原文連結：https://www.cnblogs.com/fuct/p/15361635.html