React+TypeScript+Less/Sass项目配置

---

title: React+TypeScript+Less项目配置
date: 2022-09-17 11:12:20
tags:

• React
• 框架
• TypeScript
  categories:
• React

---

配置项目

本项目采用React+Ant Design+TypeScript开发，React主要使用Function Component的形式做开发，结合路由与请求实现。

1.创建React项目

由于项目结合ts与antd开发，因此请使用以下方式创建项目并安装依赖：

# 创建名为cms-manage的项目
$ npx create-react-app cms-manage --template typescript
# 或者
$ yarn create react-app cms-manage --template typescript

# 添加antd
npm install antd --save
# 或
yarn add antd

# 添加axios
npm install axios --save
# 或
yarn add axios

清空src下所有的内容，并且新建App.tsx与index.tsx，代码如下：

// App.tsx
import React from "react";

export default function App() {
  return (
    <div>
      <h2>App</h2>
    </div>
  );
}

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
    <App />
);

先把项目跑起来：

$ npm run start

看到跑起来的界面即可。

2.Antd组件

打开Antd的官网：Antd组件

在App.tsx中：

import React, { FC } from "react";
import { Button } from 'antd';

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

export default App; 

看到蓝色按钮代表成功：

3.解包

解包之前必须做Git提交

a. Git提交

$ git add .
$ git commit -m 'xxx'
$ git remote origin xxxx
$ git push origin master

b. 解包

$ npm run eject 

解包后项目根目录出现config文件夹，代表解包成功。

4.配置Less

a. 安装Less

$ npm install less less-loader@6.0.0 --save-dev
# 或
$ yarn add less less-loader@6.0.0

b. Webpack配置

找到 webpack.config.js ，搜索 sassModuleRegex 后，在其下方添加：

module: {
    ...,
    // less加载器 
    {
        test: /\.less$/,
        use: getStyleLoaders(
            {
                //暂不配置
            },
            'less-loader'
        ),
    },
}

修改了配置文件，记得重新 yarn start 哦！

c. Less测试

删掉 index.tsx 中的 antd.css 引入，在src下新建 App.less：

@import '~antd/dist/antd.css';

@bg: #efefef;

body{
    background: @bg;
}

#root{
    font-size: 14px;
    font-family: NotoSansHans;
    color: #333333;
}

a{
    color: #333333;
    text-decoration: none;
}

注意：以上顺便把文字三属性等基本配置写了

然后在 App.tsx 中引入：

import "./App.less";

打开看到页面样式发生变化，即代表Less测试成功。

5.安装node-sass

$ npm install node-sass --save
# or
$ yarn add node-sass

之后你就可以使用Sass了

//可以在js文件中通过import 来引用*.scss文件
import  './public.scss'
//可以在scss文件中通过@import来引用*.scss文件
@import './public.scss';

6.tsconfig

打开 tsconfig.json，修改下面出现的字段：

{
  "compilerOptions": {
    "target": "ESNext",
    "baseUrl": "./src",
    "jsx": "preserve"
  }
}

baseUrl配置其指向src，所有的相对路径都可以直接从src下的文件或文件夹写起，如：

// 原本的引入
import App from './App'

// 现在的引入
import App from 'App'