如何使用CodeSandbox在LESS中为Ant设计（反应）创建自定义主题？

Question

环境设置

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

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

更新/创建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 <div>simon, helloworld!!!</div>;
  }
}

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：

以较少的文件自定义

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

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

注意：无论您的需求如何，这种方式都会加载所有组件的样式，这会导致style的babel-plugin-import选项不起作用。

---

问题

此问题与Ant Design文档中的note有关吗？

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

Answer 1

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

拥有ant design codeandbox env的最佳，快捷方法是派生此codeandbox模板。

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