create-react-app less 常规问题处理锦囊妙计

1. Ant Design iconfont 图标丢失问题

问题

在 create-react-app 项目中使用 Ant Design 时，iconfont 图标可能无法正常显示，控制台可能会出现类似以下的错误信息：

GET http://at.alicdn.com/t/font_1837492_a9ikso10ft.css net::ERR_NAME_NOT_RESOLVED

解决方案

此问题是由 Ant Design 默认使用 iconfont.cn 托管的 iconfont 文件引起的，如果网络环境无法访问此域，则无法加载图标。有两种解决方案：

1. 修改 iconfont CDN 地址

   打开项目中的 src/App.less 文件，找到以下代码：

   @import "~antd/dist/antd.less";
   

   将 ~antd/dist/antd.less 替换为 ~antd/dist/antd.dark.less：

   @import "~antd/dist/antd.dark.less";
   

   保存文件并重新启动项目，图标应该可以正常显示了。

2. 下载并本地引用 iconfont 文件

   从 iconfont.cn 下载最新的 iconfont 文件，然后将其复制到项目中的 src 文件夹中，文件名可以为 iconfont.css。

   打开 src/App.less 文件，将以下代码添加到顶部：

   @import "./iconfont.css";
   

   保存文件并重新启动项目，图标应该可以正常显示了。

2. less 样式报错

问题

在项目中使用 less 时，可能会遇到样式报错，比如：

Module build failed (from ./node_modules/antd/dist/antd.less):
Syntax Error: Unexpected token (20:1)
20 |     cursor: pointer;
   |     ^

解决方案

此问题可能是由于 less 版本不兼容导致的，请尝试以下解决方案：

1. 更新 less 版本

   确保您使用的 less 版本是最新的，可以通过以下命令更新 less：

   npm install -g less
   

2. 修改 less 配置

   打开项目中的 package.json 文件，找到 less 依赖项，将 version 字段修改为 ^4.1.0 或更高版本：

   "less": {
     "version": "^4.1.0"
   }
   

   保存文件并重新启动项目，样式报错应该可以消失了。

3. create-react-app 无法正常启动

问题描述

在运行 npm start 命令后，项目无法正常启动，控制台可能会出现类似以下的错误信息：

Module not found: Can't resolve 'less' in '/path/to/project/node_modules/antd'

解决方案

此问题可能是由于 less 没有正确安装导致的，请尝试以下解决方案：

1. 安装 less

   确保您已经安装了 less，可以通过以下命令安装 less：

   npm install less -D
   

2. 添加 less 配置

   打开项目中的 package.json 文件，找到 scripts 字段，添加以下配置：

   "scripts": {
     "start": "lessc src/App.less src/App.css && react-scripts start"
   }
   

   保存文件并重新启动项目，项目应该可以正常启动了。

总结

本文介绍了在 create-react-app 项目中使用 less 时可能遇到的常见问题以及对应的解决方案。希望对您有所帮助。如果您还有其他问题，请随时提问。