create-react-app相关配置

1 修改端口关闭自动打开浏览器

2 增加less配置

1、npm install less less-loader --save安装less相关依赖模块

2、运行npm run eject 将webpack的配置暴露出来

3、修改webpack.config.js的webpack配置文件

增加less匹配

 const lessRegex =/\.less$/; // 新增less配置

 const lessModuleRegex =/\.module\.less$/; // 新增less配置，这个其实不配置也行

 

在rules配置项中增加less 配置(在sass配置后增加以下代码即可)

//#region 开始配置less
            {
              test: lessRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                  {
                    importLoaders: 2,
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                  },
                  'less-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                  {
                    importLoaders: 2,
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                    modules: true,
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                  'less-loader'
              ),
            },
      //#endregion 结束配置less

 

如图 

#3 关闭eslint提示

将下面部分代码注释即可

// 关闭eslint提醒
        /*{
          test: /\.(js|mjs|jsx|ts|tsx)$/,
          enforce: 'pre',
          use: [
            {
              options: {
                cache: true,
                formatter: require.resolve('react-dev-utils/eslintFormatter'),
                eslintPath: require.resolve('eslint'),
                resolvePluginsRelativeTo: __dirname,
                
              },
              loader: require.resolve('eslint-loader'),
            },
          ],
          include: paths.appSrc,
        },*/

 

如图