Как создать собственную тему для Ant Design (React) в LESS, используя CodeSandbox? - PullRequest
Новая
       48

Как создать собственную тему для Ant Design (React) в LESS, используя CodeSandbox?

0 голосов
/ 05 февраля 2020

Настройка среды

Для простоты использования я уже выполнил следующие шаги: Вот ссылка на пример проекта .

  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

Документация Ant Design заявляет следующее здесь :

Настройка в меньшем количестве файлов

Другой подход к настройке темы - создание меньшего количества файлов в переменных для переопределения 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 не работает.

Вопрос

Эта проблема относится к note в документации Ant Design?

Как я могу решить эту проблему и переопределить стили Ant Design в LESS?

1 Ответ

0 голосов
/ 05 февраля 2020

В вашем коде andandbox env вы не настраиваете babel-plugin-import, поэтому наличие @import "~antd/dist/antd.less"; в вашем файле .less не будет иметь никакого значения.

Лучший и быстрый способ получить ant design кодов andbox is чтобы раскошелиться на этот шаблон кодов и ящиков.

Ссылка: https://codesandbox.io/s/wk04r016q8

Чтобы ваш код изолированной программной среды работал, вам нужно сконфигурировать ваш пакет посылок, чтобы меньше компилировать в css используя @parcel/transformer-less

Ссылка: https://github.com/parcel-bundler/parcel#transforms

...