react 项目配置 less 使用 antd 组件库

前置条件：已创建 react 项目，已安装 node.js
创建一个 react 项目

参考链接（若使用 yarn 进行安装配置可以直接看这篇）：
Ant Design——在 create-react-app 中使用

注意：以下命令的执行需要管理员权限，如果使用VS Code进行开发，可以右键快捷方式，选择以管理员方式运行。

一、初步配置

1.引入 antd

npm install antd

2.修改 react 项目中 src/App.js，引入 antd 的按钮组件
（可以将原来模板里面的内容全部删除，再复制以下代码进去）

import React from 'react';
import { Button } from 'antd';
import './App.css';

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

3.修改 src/App.css，在文件顶部引入 antd/dist/antd.css
（可以将原来模板里面的内容全部删除，再复制以下代码进去）

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

现在启动项目就可以在页面上看到一个蓝色按钮了：

至此已经成功运行 antd 组件了
以下内容为 antd 的高级配置，使用 craco （一个对 create-react-app 进行自定义配置的社区解决方案）。

二、高级配置

1.安装 craco

npm install @craco/craco

2.修改 package.json 里的 scripts 属性
"-“表示删除此行，”+"表示增加此行，下同

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

3.安装 craco-less（帮助加载 less 样式和修改变量）

npm install craco-less

4.在项目根目录创建一个 craco.config.js 用于修改默认配置，
复制以下内容到新建的文件中

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

5.重命名 App.css 为 App.less，同时修改引入的文件名后缀

/* src/App.js */
- import './App.css';
+ import './App.less';

/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';

6.重新启动项目，可以看到一个绿色的按钮，说明配置完成
注意：需要重新启动，直接保存修改看不到效果

npm start