我們在用react腳手架搭建專案的時候，webpack的相關配置已經被隱藏了。如果要解決less樣式無效這個問題，那麼我們需要先把webpack的相關配置暴露出來。

先貼一下我react和webpack的版本，因為我在查資料的時候發現config最後暴露出來的檔案和網上的不一樣。

1、安裝less依賴

1 npm install less less-loader

2、暴露配置：

1 npm run eject

3、修改配置檔案

經過第二步之後，你的專案會多一個config的資料夾，裡面的內容如上圖。

然後需改一下webpack.config.js即可。

（1）在47行左右新增lessRegex 和lessModuleRegex ，參考上面的cssRegex和cssModuleRegex

1 // style files regexes
2 const cssRegex = /\.css$/;
3 const cssModuleRegex = /\.module\.css$/;
4 const sassRegex = /\.(scss|sass)$/;
5 const sassModuleRegex = /\.module\.(scss|sass)$/;
6 const lessRegex = /\.less$/;
7 const lessModuleRegex = /\.module\.less$/;

（2）在73行左右新增一個loader

 1   const getStyleLoaders = (cssOptions, preProcessor) => {
 
 2     const loaders = [
 3       isEnvDevelopment && require.resolve('style-loader'),
 4       isEnvProduction && {
 5         loader: MiniCssExtractPlugin.loader,
 6         // css is located in `static/css`, use '../../' to locate index.html folder
 7         // in production `paths.publicUrlOrPath` can be a relative path
 

 8         options: paths.publicUrlOrPath.startsWith('.')
 9           ? { publicPath: '../../' }
10           : {},
11       },
12       {
13         loader: require.resolve('css-loader'),
14         options: cssOptions,
15       },
16       {
17         loader: require.resolve('less-loader')
18       }

圖中的最後一個大括號的內容。

（3）、在326行左右你會看到一個module，裡面有strictExportPresence，rules等引數。再配置兩個關於less的引數即可。參照463行左右的sassRegex和sassModuleRegex。

 1  {
 2      test: lessRegex,
 3      exclude: lessModuleRegex,
 4      use: getStyleLoaders(
 5        {
 6          importLoaders: 3,
 7          sourceMap: isEnvProduction && shouldUseSourceMap,
 8        },
 9        'less-loader'
10      ),
11      sideEffects: true,
12    },
13 
14    {
15      test: lessModuleRegex,
16      use: getStyleLoaders(
17        {
18          importLoaders: 3,
19          sourceMap: isEnvProduction && shouldUseSourceMap,
20          modules: {
21            getLocalIdent: getCSSModuleLocalIdent,
22          },
23        },
24        'less-loader'
25      ),
26    },

最後重啟專案，然後坐等Compiled successfully!的提示就好了。