如何使用 CodeSandbox 在 LESS 中为 Ant Design (React) 创建自定义主题？

Posted 2023-02-19

【中文标题】如何使用 CodeSandbox 在 LESS 中为 Ant Design (React) 创建自定义主题？

【英文标题】：How to create a custom theme for Ant Design (React) in LESS using CodeSandbox?

【发布时间】：2020-05-21 14:40:15

【问题描述】：

环境设置

为了方便使用，我已经完成了以下步骤：Here's a link to a sample project。

前往CodeSandbox（或使用 VSCode - 对这些步骤进行适当更改）并创建一个新项目（我创建了一个 Vanilla 项目） 添加以下依赖项： antd react react-dom 进行以下文件更改：

更新/创建src/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./styles.less";
import App from "./App";

const root = document.getElementById("app");
ReactDOM.render(<App />, root);

创建App.js

import React from "react";

class App extends React.Component 
  render() 
    return <Button>Test</Button>;
  


export default App;

将styles.css 重命名/创建为styles.less

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

body 
  font-family: sans-serif;

---

问题

现在重新加载项目的代码和框 浏览器 选项卡。它不断加载消息 Transpiling Modules... 并转到控制台显示错误：

Uncaught (in promise) TypeError: Cannot read property 'replace' of undefined at n (less.js:10831)

---

蚂蚁设计

Ant Design 文档声明如下here：

在更少的文件中自定义

另一种自定义主题的方法是在变量中创建一个 less 文件来覆盖 antd.less。

@import '~antd/dist/antd.less'; // Import Ant Design styles by less entry
@import 'your-theme-file.less'; // variables to override above

注意：这种方式会加载所有组件的样式，而不管您的需求如何，这会导致babel-plugin-import 的styleoption 不起作用。

---

问题

这个问题是否与 Ant Design 文档中的注释有关？

如何解决此问题并在 LESS 中覆盖 Ant Design 样式？

【参考方案1】：

在您的代码和框环境中，您没有配置babel-plugin-import，因此在您的.less 文件中包含@import "~antd/dist/antd.less"; 不会有任何区别。

拥有ant designcodesandbox 环境的最佳和快速方法是分叉这个codeandbox 模板。

链接：https://codesandbox.io/s/wk04r016q8

为了让您的沙盒代码正常工作，您需要配置您的包裹捆绑器以减少使用 @parcel/transformer-less 对 css 的编译

链接：https://github.com/parcel-bundler/parcel#transforms