整合最新版 create-react-app、typescript、ant-design、less、less-loader以及路径映射的方法

最近兴趣使然，想要学习typescipt、react、ant，巧不巧刚好可以凑成一套完成的解决方法，可惜过程却并不顺利，现在记录下来我的解决过程，供大家参考希望能顺利一次跑通

版本说明

create-react-app 版本号：4.0.0（2020年10月31日，内部自带react、typescript等）
Ant Design of React 版本号：4.7.3
less 版本号：3.12.2
less-loader 版本号：7.0.2
node 版本号：12.13.0
npm 版本号：6.12.0

一、利用create-react-app脚手架安装项目

本人习惯用npm进行安装，喜欢yarn应该也能行的通（默认是yarn）

npx create-react-app antd-demo-ts --typescript --use-npm

二、将所有内建的配置暴露出来

这一步相当关键，若不在第一次执行该步骤，可能会出错

npm run eject

暴露之后的目录结构在这里插入图片描述

三、修改路径映射

在webpack.config.js的alias下增加"@": path.resolve("src")，以后就可以用@对src文件下的文件进行索引啦~

"@": path.resolve("src")

PS:如果是typescript的话还需要在根目录下的tsconfig.json内增加路径映射

// tsconfig.json
"compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@/*": ["./src/*"]
  }
}

截图：

在这里插入图片描述

四、引入ant

现在从 yarn 或 npm 安装并引入 antd。

npm i antd --save

目前ant-desgin@import '~antd/dist/antd.css';还只能css使用引入样式

五、引入less、less-loader并修改配置

npm i less less-loader --save-dev

安装完成后在webpack.config.js增加常量：

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

截图：在这里插入图片描述

再在 cssModuleRegex 和 sassModuleRegex 之间添加如下代码：

// 编译less文件
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
    },
    "less-loader"
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      }
    },
    "less-loader"
  ),
},

截图：在这里插入图片描述

然后修改getStyleLoaders函数，将if (preProcessor)改写：

if (preProcessor) {
  let loader = {
    loader: require.resolve(preProcessor),
    options: {
      sourceMap: true,
    },
  };
  if (preProcessor === "less-loader") {
    loader.options.lessOptions = {
      javascriptEnabled: true,
    };
  }
  loaders.push(
    {
      loader: require.resolve("resolve-url-loader"),
      options: {
        sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        root: paths.appSrc,
      },
    },
    loader
  );
}

截图：在这里插入图片描述

自此less配置生效，让我们试试吧

修改 src/App.js，并将App.css重命名App.less，为引入 antd 的按钮组件。

import React, { FC } from "react";
import { Button } from "antd";
import "@/App.less";

const App: FC = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

修改 src/App.less，在文件顶部引入 antd/dist/antd.less。

@import "~antd/dist/antd.less";

！运行npm run start看看效果

再次修改 src/App.less，引入官方提供的主题再看看效果

@import "~antd/dist/antd.dark.less"; // 引入官方提供的暗色 less 样式入口文件
@import "~antd/dist/antd.compact.less"; // 引入官方提供的紧凑 less 样式入口文件

！运行npm run start看看效果

在这里插入图片描述