Введение
Вы когда-нибудь слышали о 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.