体验Webpack5从零搭建一个React+TS项目（二）

Webpack5从零搭建一个React+TS项目（二）

在上一篇文章中，我们介绍了如何使用Webpack5从零搭建一个React+TS项目的基础知识。在这篇文章中，我们将继续深入探讨该项目的搭建过程，重点介绍如何配置CSS和Less。

1. CSS配置

1.1 安装必要的依赖包

首先，我们需要安装必要的依赖包。打开终端，输入以下命令：

npm install --save-dev css-loader style-loader

1.2 配置Webpack

接下来，我们需要在Webpack的配置文件中配置CSS的处理规则。在webpack.config.js文件中，找到module.rules数组，并在其中添加以下代码：

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
}

1.3 编写CSS代码

现在，我们可以开始编写CSS代码了。在src目录下创建一个名为index.css的文件，并在其中编写以下代码：

body {
  background-color: #f0f0f0;
}

h1 {
  color: #333;
  font-size: 24px;
}

1.4 导入CSS代码

接下来，我们需要将编写的CSS代码导入到React组件中。在App.tsx文件中，添加以下代码：

import './index.css';

2. Less配置

2.1 安装必要的依赖包

首先，我们需要安装必要的依赖包。打开终端，输入以下命令：

npm install --save-dev less less-loader

2.2 配置Webpack

接下来，我们需要在Webpack的配置文件中配置Less的处理规则。在webpack.config.js文件中，找到module.rules数组，并在其中添加以下代码：

{
  test: /\.less$/,
  use: ['style-loader', 'css-loader', 'less-loader']
}

2.3 编写Less代码

现在，我们可以开始编写Less代码了。在src目录下创建一个名为index.less的文件，并在其中编写以下代码：

body {
  background-color: #f0f0f0;
}

h1 {
  color: #333;
  font-size: 24px;

  &:hover {
    color: #000;
  }
}

2.4 导入Less代码

接下来，我们需要将编写的Less代码导入到React组件中。在App.tsx文件中，添加以下代码：

import './index.less';

3. 运行项目

现在，我们可以运行项目了。在终端中，输入以下命令：

npm start

项目启动后，你就可以在浏览器中看到样式化的React组件了。

至此，我们已经完成了Webpack5从零搭建一个React+TS项目的第二部分。在下一篇文章中，我们将继续探讨该项目的搭建过程，重点介绍如何配置其他类型的文件，如图片和字体。