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

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

版本说明

1. create-react-app 版本号：4.0.0（2020年10月31日，内部自带react、typescript等）
2. Ant Design of React 版本号：4.7.3
3. less 版本号：3.12.2
4. less-loader 版本号：7.0.2
5. node 版本号：12.13.0
6. 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")

截图：

四、引入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: true,
      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看看效果

来源：oschina

链接：https://my.oschina.net/u/4324623/blog/4700837