Введение

Вы когда-нибудь слышали о Fantic UI? Вполне вероятно, что вы этого не сделали. Это вилка сообщества великой библиотеки пользовательского интерфейса под названием Semantic UI, которая, к сожалению, на данный момент немного заброшена, и некоторые великие люди сделали вилку и продолжили работу, которая не ограничивается исправлением ошибок! Их намерение состоит в том, чтобы вернуться к основному репо, как только (и, очевидно, ЕСЛИ), когда разработка начнется снова.

Многие люди, сталкивающиеся с FUI / SUI (я буду использовать эти аббревиатуры в этой статье, чтобы не повторяться каждый раз целыми именами. Они, очевидно, означают Fantic UI / Semantic UI), быстро сталкиваются с проблемой любой настройки, и именно это произошло с меня.

Моя установка

Я использую FUI в своем приложении ReactJS, построенном на отличном шаблоне от @rokoroku, который доступен здесь, на Github. Ключевым моментом является то, что у меня есть отдельный webpack.config.js, поэтому, если вы используете create-react-app, вам, вероятно, придется извлечь перед применением любого из них.

Давай сделаем это!

Установите необходимые зависимости

Вам необходимо установить некоторые зависимости:

yarn add -D fomantic-ui-less less less-loader extract-text-webpack-plugin

Убедитесь, что он установил less с версией >=3.0.0, так как иногда он будет устанавливать 2.* по умолчанию, что доставит вам неприятности.

Настройте Webpack для загрузки МЕНЬШЕ файлов

Откройте свой webpack.config.js и добавьте следующие части:

Создайте папку с каркасом вашей настройки

На корневом уровне вашего проекта (так же, как src или node_modules) создайте папку с именем semantic-ui (или что-то еще, но не забудьте изменить ее в псевдонимах).

Зайдите на: https://github.com/fantic/Fantic-UI-LESS и скачайте:

  • _site папка,
  • theme.config.example файл,
  • themes папка.

Поместите их все в созданную папку. Удалите подчеркивание из _site и .example из theme.config.

theme.config

Этот файл в основном подготовлен, но вам нужно изменить некоторые детали:

/* Path to theme packages */
@themesFolder : 'themes';

/* Path to site override folder */
@siteFolder  : '../semantic-ui/site';



/*******************************
         Import Theme
*******************************/

@import (multiple) "~fomantic-ui-less/theme.less";
@fontPath : "../../../themes/@{theme}/assets/fonts";

/* End Config */

И последнее, но не менее важное: импортируйте основной файл LESS.

Вы должны импортировать semantic.less файл в свой входной файл.

import 'fomantic-ui-less/semantic.less';

Теперь он работает!

Теперь вы можете идти, например, в semantic-ui/site/globals/site.variables и добавить:

@primaryColor: #002f4e;
@pageBackground: #eff0f1;

который изменит ваш основной цвет и цвет фона <body>.

Вот и все

Это все, что вам нужно сделать. Помните, что после выполнения всех шагов вам необходимо перезапустить свой Webpack, потому что вы внесли изменения в свою конфигурацию, которые не будут перезагружаться.

Кредиты

Частично это было основано на замечательной статье Аггелоса Арванитакиса, которую вы можете найти здесь: https://medium.com/webmonkeys/webpack-2-semantic-ui-theming-a216ddf60daf. Мне пришлось провести небольшое исследование и найти некоторые исправления, потому что он был написан для Webpack 2 с SUI, а также были удалены некоторые вещи, такие как readme в репозитории SUI LESS и т. Д., Поэтому не так просто заставить его работать.

Я надеюсь, что эта статья поможет вам настроить FUI / SUI с помощью LESS.