react项目中craco配置less

安装craco

npm i @craco/craco

安装less

npm i less

修改package.json文件

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

安装craco-less

npm i craco-less

配置装饰器

npm i @babel/plugin-proposal-decorators

在package.json同级目录下创建一个craco.config.js文件

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
// UI库
import "antd/dist/antd.css";
import { Form, Input, Button, Radio } from "antd";
const { TextArea } = Input;

class StepsForm extends React.Component {
  render() {
    return (
      <Form className="stepsForm" layout="horizontal">
        <Form.Item label="上线题目">
          <Input placeholder="input placeholder" />
        </Form.Item>
        <Form.Item label="上线内容">
          <TextArea rows={4} autoSize={{ minRows: 2 }} />
        </Form.Item>
        <Form.Item>
          <Button type="primary">Submit</Button>
        </Form.Item>
      </Form>
    );
  }
}

ReactDOM.render(<StepsForm />, document.getElementById("root"));

注意：公共入口引入antd的less文件

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

tips：用craco配置less，避免暴露Webpack配置文件(暴露配置文件会影响项目升级)。