5回答

阿莱克斯刘

2025-01-21

### 5. 创建 Less 文件：
现在你可以在项目中创建 `.less` 文件并在组件中导入它们。例如，创建一个 `styles.less` 文件，并在组件中导入：

```
/* styles.less */
@primary-color: #4caf50;

.container {
  background-color: @primary-color;
  color: white;
  padding: 20px;
}
```

```
// App.js
import React from 'react';
import './styles.less';

const App = () => (
  <div className="container">
    Hello, world!
  </div>
);

export default App;
```

这样，你的 Create React App 项目就配置好了 Less， 你可以在项目中使用 Less 来编写样式了。

0

0

阿莱克斯刘

2025-01-21

### 4. 修改 package.json：
在 `package.json` 中找到 `scripts` 部分，并将 `react-scripts` 替换为 `react-app-rewired`：

```
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}
```

0

0

阿莱克斯刘

2025-01-21

### 3. 创建配置文件： 在项目根目录中创建 `config-overrides.js` 文件，并添加以下内容：
```
const { override, addLessLoader } = require('customize-cra'); module.exports = override( addLessLoader({ lessOptions: { javascriptEnabled: true, }, }) );
```

0

0

阿莱克斯刘

2025-01-21

### 2. 修改 webpack 配置：
默认情况下，Create React App 的 webpack 配置是隐藏的，你需要使用 `react-app-rewired` 来覆盖默认配置。

首先，安装 `react-app-rewired`：

```
npm install react-app-rewired
```

0

0

阿莱克斯刘

2025-01-21

要在 Create React App 项目中配置 Less，你可以按照以下步骤进行操作：

### 1. 安装 Less 和相关 Loader：
首先，你需要安装 `less` 和 `less-loader`。在项目根目录中运行以下命令：

npm install less less-loader

然后，安装 `customize-cra`：
npm install customize-cra

0

0