Как использовать глобальную таблицу стилей css, включенную в GatsbyJS

По умолчанию GatsbyJS продвигает использование модулей css и пользовательских библиотек css-in-js, таких как гламурно и типографика

К сожалению, я портирую существующий сайт на GatsbyJS, который использует традиционные глобальные таблицы стилей. Преобразование всего существующего инструментария HTML-CSS в модули CSS - это рутинная работа.

Сейчас я хочу обновить GatsbyJS html.js и добавить

<link rel="stylesheet" type="text/css" href="/style.old.css" />

В шапку. Я style.old.css живу в /public, однако это стирается при запуске сборки.

Я надеялся, что будет плагин для поддержки этого, но похоже, что команда Gatsby не одобряет глобальный CSS, который понятен для новых проектов.

Я попытался написать плагин, чтобы добавить это, но нашел ограниченные ресурсы о том, как написать «плагин стиля».


webpack gatsby
person kevzettler    schedule 27.10.2017    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Вы близко!

Вместо того, чтобы помещать style.old.css в /public, поместите его в /layouts. Затем просто импортируйте его в /layouts/index.js следующим образом:

import './style.old.css'

Когда вы запускаете новый проект gatsby (gatsby new project-name), вы заметите index.css файл в папке /layouts, который по умолчанию импортируется в layouts/index.js. Просто следуйте этому примеру, чтобы добавить свои собственные глобальные таблицы стилей.

В общем, вы не должны ничего помещать прямо в /public. Если вы хотите, чтобы статические файлы попадали в папку /public, создайте папку /static и поместите их туда (Гэтсби скопирует любые файлы из /static в /public за вас).

person ooloth    schedule 28.10.2017
comment
Это красивое и чистое решение. Если вам нужны только некоторые правила из таблицы стилей и вы не хотите объединять все это, вы также можете использовать такое решение, как github.com/glortho/styled-import (примечание: я автор!) - person glortho; 21.12.2018