2

环境设置

为了便于使用，我已经完成了以下步骤：这是一个示例项目的链接。

  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 <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 文档在此处说明以下内容：

在更少的文件中自定义

另一种自定义主题的方法是在要覆盖的变量中创建一个 less 文件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 文档中的注释有关？

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

4

1 回答 1

-1

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

拥有codesandbox env 的最佳和快速方法ant design是fork 这个codeandbox 模板。

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

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

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

于 2020-02-05T17:04:38.413 回答