react項目進行less配置

前言：

由于 create-react-app 腳手架中并沒有配置關于 less 檔案的解析，是以我們需要自己進行配置。需要安裝插件 less less-loader。

安裝步驟：

1. create-react-app file_name建立新項目或打開已建立的項目
2. 安裝less

npm install less less-loader --save
           

3.拉取react的配置檔案

npm run eject 
           

4.在webpack.config.js檔案中找到 css和sass配置項,在其之後加上，并模仿sass的寫一份less的配置

const lessRegex =/\.less$/;
const lessModuleRegex =/\.module\.less$/;
           

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

5.正常到這裡，隻要重新運作項目即可

可能出現的問題：

1.npm run eject拉取配置檔案時出錯

原因：如檔案被修改，無法運作，可能是.git檔案的存在問題。

解決方案：到檔案目錄下，删除.git檔案即可

1. 安裝完成重新運作出錯

   

   原因： less-loader安裝的版本過高

   解決方案：

1.npm uninstall less-loader
2.npm install [email protected]