Использование Semantic UI React с Gatsby JS - надежное решение для сверхбыстрой настройки сайта. (Скажите это в пять раз быстрее.) Однако их совместное использование временами может вызвать ошибки, и если вы не будете осторожны, вы можете потеряться в сорняках. Прочтите, чтобы получить прямое объяснение того, как интегрировать Gatsby JS и Semantic UI React.
Прежде чем мы начнем: вносите ли вы изменения в существующий проект или начинаете с нуля? Если вы запускаете свой проект Gatsby JS и одновременно интегрируете в него Semantic UI React, существует шаблон Gatsby 2 Semantic UI, который может стать хорошей отправной точкой.
Однако пока не отказывайтесь от существующих проектов. Настройка Semantic UI React и Gatsby JS не так сложна, как может показаться, даже если доступные документы немного неясны. Мы можем сделать это всего за 6 маленьких шагов. Сначала он будет более многословным, а затем станет более кодовым. Давайте идти!
Первое: предположим, вы хотите иметь возможность вносить изменения в свою тему в какой-то момент. Это означает, что мы собираемся начать с установки semantic-ui-less и gatsby-plugin-less.
После установки gatsby-plugin-less перенесите его в gatsby-config.js (который у вас должен быть, если только ваш стартер Gatsby не был ДЕЙСТВИТЕЛЬНО необычным):
// in gatsby-config.js plugins: [`gatsby-plugin-less`]
Второй: создайте новую папку внутри вашей папки src. Для простоты назовите его «семантическим». Теперь поищите в своей папке node_modules семантический-ui-less. Видите папку _site? Скопируйте его в src / semantic как новую подпапку «site». Вы можете оставить исходную в node_modules / semantic-ui-less. То же самое с theme.config.example - скопируйте его в src / semantic и переименуйте, на этот раз в theme.config.
//your tree should include: src/semantic/site sec/semantic/theme.config
В-третьих: некоторые люди здесь сталкивались с проблемой, связанной с путями к шрифтам и значками. Прекратите этот сценарий, добавив в файл semantic / theme.config следующее:
@fontPath : '../assets/fonts'
(Эта проблема по-видимому исправлена, но лучше перестраховаться, и внесение этого изменения не должно привести к непредвиденным результатам.)
Четвертый: отразите изменения местоположения в вашем новом файле semantic / theme.config:
//where you had @siteFolder : 'site', add: @siteFolder : '../../src/semantic/site'; //where you had @import (multiple) "theme.less", add: @import (multiple) "~semantic-ui-less/theme.less";
Пятое: в gatsby-node.js требуется путь:
const path = require(“path”);
Затем используйте onCreateWebpackConfig, чтобы отправить правильный theme.config (ваш новый!) В semantic-ui-less:
exports.onCreateWebpackConfig = ({ actions }) => { actions.setWebpackConfig({ resolve: { alias: { "../../theme.config$": path.join(__dirname, "src/semantic/theme.config")} } }); };
Шестое: если вы в настоящее время импортируете / ссылаетесь на Semantic в любом месте (просто введите «семантический»), теперь вы хотите вызвать Less: import «semantic-ui-less / semantic.less»;
Вот и все! Шесть (супер простых) шагов, чтобы заставить Semantic UI React работать с Gatsby. Теперь вы должны иметь возможность вносить изменения в свою тему точно так же, как в любом проекте, использующем Semantic UI React. Удачной тематики!