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

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

注意：以下命令的执行需要管理员权限，如果使用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