整合最新版 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")

截圖：

在這里插入圖片描述

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

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/200729.html

標籤：其他

上一篇：網安上課打卡day03

下一篇：NXP JN5169使用UART發送資料