创建工程

首先创建一个工程

npx create-react-app weibo

cd移动到当前创建的文件下

cd weibo

安装 React 路由

npm install react-router react-router-dom@5.2.0 --save

安装 npm install 安依赖包

npm install antd --save
npm install axios --save

安装less和less-loader

npm install less less-loader --save

配置less

使用 create react app 是没有 less 配置的，需要我们去手动配置

1、执行 npm run eject ，暴露 webpack.config.js

npm run eject

2、找到webpack.config.js文件

找到config目录下webpack.config.js文件
在这里插入图片描述

配置less

这两个变量是配置 less 的匹配规则

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

在这里插入图片描述

找到 oneof 关键字，配置 less 规则

将 sass 文件配置改为如下

{
                test: lessRegex,
                exclude: lessModuleRegex,
                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'
                ),
              },

在这里插入图片描述
若是没有配置好就直接下载webpack.config.js替换掉即可