Как да персонализирате дизайн на мравки с React & Webpack ... липсващото ръководство

Ant Design има невероятен набор от реагиращи компоненти. Ако четете това, не е необходимо да обяснявам защо или как да ги използвате, а как да ги персонализирате.

Официалните документи ви дават само улики в персонализирането, но не и пълно ръководство за употреба. Намерението на това преписване е да ви преведе през първоначалната настройка за персонализиране на темата по подразбиране ant-d.

TL; DR или „просто ми позволи да видя кода“ можете да намерите тук.

* читатели - моля, коментирайте, ако видите някакви грешки или изпращате заявки за изтегляне. Идеята е това писане да бъде актуализирано и възможно най-точно (m̶a̶y̶b̶e̶ ̶e̶v̶e̶n̶ ̶m̶e̶r̶g̶e̶d̶ ̶i̶n̶t̶o̶ ̶t̶h̶e̶ ̶d̶o̶c̶s̶ - актуализация 2017–06–25, добавено към документите).

* Актуализация 2017–11–03 - извинявам се, че не успях да отговоря на всички въпроси, които се получават. Поради безброй начини за конфигуриране на приложение за реакция е трудно да се предостави подкрепа в секцията за коментари. Моля, опитайте да стартирате демонстрационното репо, което сглобявам, и изпращам заявки за изтегляне или файлови грешки там. Благодаря!

Първа стъпка - Инсталиране на пакети:

  • Инсталиране на дизайн Ant:

npm инсталирате antd - save

  • Инсталирайте модулния модул за плъгини на Ant (некачествено):

Това ще ни позволи да свържем само мравканите компоненти, които използваме.

npm инсталирайте babel-plugin-import --save-dev

  • Инсталирайте пакета с по-малко vars-to-js:

Приема съдържанието на по-малко файл като низ и връща обект, съдържащ всички променливи, които е намерил.

npm инсталирайте по-малко-vars-to-js --save-dev

  • Инсталирайте по-малко и webpack css / по-малко зареждачи, ако още не сте го направили:

npm инсталирайте по-малко зареждащ се css-loader стил-loader -save-dev

Стъпка втора - Конфигуриране на Babel-loader:

Добавете babel-plugin-import към webpack babel loader или използвайте .babelrc файл.

//.babelrc
{
  "предварително зададени настройки: [...]
  "плъгини": [
    ["import", {"libraryName": "antd", "style": true}],
    ...
  ]
}
// webpack2.config.js
модул: {
  правила: [
    {
      товарач: „товарач-товарач“,
      изключете: / node_modules /,
      тест: /\.js$/,
      настроики: {
        предварително зададени настройки: [...]
        приставки: [
          ['import', {libraryName: "antd", style: true}]
        ]
      }
    }
    ...
  ]
}
// webpack1.config.js
модул: {
  товарачи: [
    {
      тест: /\.jsx?$/,
      изключете: / node_modules /,
      товарач: 'babel',
      заявка: {
        приставки: [
          ['import', {libraryName: "antd", style: true}]
        ]
      }
    }
  ...
  ]
}

Трета стъпка - Създайте файл .less за отмените на променливата на тема мравка:

// ant-default-vars.less
// Наличните променливи на темите могат да бъдат намерени в
// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

@ основен цвят: # 193D71; <- първата ни тема за мравки отменя!

Стъпка четвърта - Конфигурирайте уебпакет с по-малко зареждане:

// webpack * .config.js
const път = изисквам ('път');
const fs = изисквам ('fs');

const lessToJs = изискват ('less-vars-to-js');
const topicVariables = lessToJs (fs.readFileSync (path.join (__ dirname, './ant-theme-vars.less'), 'utf8'));
...
// webpack2.config.js
модул: {
  правила: [
    ...
    {
      тест: /\.less$/,
      употреба: [
        {loader: "style-loader"},
        {loader: "css-loader"},
        {loader: "по-малко товарач",
          настроики: {
            modifyVars: topicVariables
          }
        }
      ]
    }
  ]
}
//webpack1.config.js
модул: {
  товарачи: [
    {
      тест: /\.less$/,
      loader: 'style-loader! css-loader! по-малък товарач',
      заявка: {
        modifyVars: topicVariables
      }
    }
  ...
  ]
}

Пета стъпка (незадължително) - конфигуриране на шрифтове:

Шрифтовете / иконите се сервират от Alibaba CDN по подразбиране. Можете да ги изтеглите и сервирате от вашия проект или да ги добавите към вашия собствен CDN (препоръчително). По-долу показва как да конфигурирате URL адреса, от който се обслужва.

// webpack * .config.js
const път = изисквам ('път');
const fs = изисквам ('fs');

const lessToJs = изисквам ('less-vars-to-js');
const topicVariables = lessToJs (fs.readFileSync (path.join (__ dirname, './ant-theme-vars.less'), 'utf8'));
// lessToJs не поддържа @ icon-url: "some-string", така че ръчно го добавяме към създадения обект topicVariables js тук
topicVariables ["@ icon-url"] = "'// localhost: 8080 / шрифтове / iconfont'";

Това е!

Надяваме се, че това помага на онези, които са останали или объркани, когато се опитват да персонализират ant-d библиотеката.

Уговорки

  • Можете да отмените само това, което е във файла на default.less mit.
  • Ако трябва да промените темата извън стандартната настройка на мравка. Освен ако не трябва да намерите класовете и ръчно да ги отмените в своите проекти css :(
  • Отмяна на темите се извършва по време на компилиране, така че няма (вграден) превключване на теми по време на изпълнение.