React 项目当中使用less，区分cra/vite

在 React 项目中使用 Less（一种 CSS 预处理器）可以让你更方便地管理样式。以下是在 React 项目中使用 Less 的一般步骤：

1. 首先，确保你的 React 项目已经配置支持 Less。你可以使用 Create React App 这样的工具来创建一个支持 Less 的 React 项目，或者手动配置 webpack 或 Parcel 等构建工具来支持 Less。

2. 如果是使用 Create React App 创建的项目，你可以在项目中运行以下命令来安装 Less 相关的依赖：

npm install less less-loader

1. 在项目中创建一个 Less 文件，比如 styles.less，并在其中书写你的样式代码，例如：

@primary-color: blue;

body {
    background-color: @primary-color;
}

1. 在需要引入样式的组件中，使用 import 引入 Less 文件，例如：

import React from 'react';
import './styles.less';

const MyComponent = () => {
    return (
        <div className="my-component">
            <h1>Hello, React with Less!</h1>
        </div>
    );
};

export default MyComponent;

1. 最后，确保构建工具能够正确解析 Less 文件，并将其转换为 CSS 文件。在你的构建配置中（比如 webpack.config.js）添加相应的配置，确保 Less 文件可以被正确加载和转换。

如果你想使用 Yarn 和 Vite 创建一个 React 项目并使用 Less，可以按照以下步骤进行：

1. 首先，确保你已经安装了 Yarn 包管理工具。你可以从 Yarn 的官方网站 (https://yarnpkg.com/) 下载并安装适用于你的操作系统的版本。

2. 在命令行中执行以下命令来创建一个新的 Vite React 项目：

yarn create @vitejs/app my-react-app --template react

这将使用 Vite 的模板创建一个名为 my-react-app 的新项目。

1. 进入项目目录：

cd my-react-app

1. 接下来，安装 Less 相关的依赖：

yarn add less @vitejs/plugin-react-refresh vite-plugin-legacy

1. 创建一个 Less 文件，比如 styles.less，并书写你的样式代码，例如：

@primary-color: blue;

body {
  background-color: @primary-color;
}

1. 在需要引入样式的组件中，使用 import 引入 Less 文件，例如：

import React from 'react';
import './styles.less';

const MyComponent = () => {
  return (
    <div className="my-component">
      <h1>Hello, React with Less in Vite using Yarn!</h1>
    </div>
  );
};

export default MyComponent;