一.暴力修改Webpack.config.js

第一步：首先安装 less和less-loader

终端命令

npm install less less-loader --save-dev

第二步：我们需要配置webpack.config.js文件

通过运行命令 npm run eject 在根目录下生成一个config文件夹

如果报错可以尝试一下步骤 终端命令 => git add . => git commit -m ''

最后尝试npm run eject 。

第三步：找到config文件夹下面的 webpack.config.js文件，修改里面的配置如下添加less和less-loader配置

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// 新增less正则
const lessRegex = /\.(scss|sass)$/;
const lessModuleRegex = /\.module\.(scss|sass)$/;

			{
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: 'icss',
                  },
                },
                'sass-loader'
              ),
              sideEffects: true,
            },
            //新增less-loader
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: 'icss',
                  },
                },
                'less-loader'
              ),
              sideEffects: true,
            },