Использование 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. Удачной тематики!