Создание страницы AMP в Gatsby с использованием gatsby-plugin-google-amp, но с использованием всех стилей сайта

Question

Я ценю, что плагин больше не поддерживается в его текущем виде (https://www.gatsbyjs.org/packages/gatsby-plugin-google-amp/?=Amp), но хотел использовать его в качестве основы для добавления страниц AMP в мои сайт. Я нормально установил плагин и могу создавать AMP-версии моих необходимых страниц.

Однако всякий раз, когда я пытаюсь импортировать файл или модуль CSS, все стили для всего моего сайта автоматически добавляются к странице (и, следовательно, аннулируют страницу AMP). Как я могу импортировать только одну таблицу стилей? Я пробовал с модулями CSS и без радости:

import React from "react"
import { graphql } from "gatsby"
import ampStyles from "../assets/css/amp.module.css"

Без импорта css страницы проверяются нормально. Я хочу импортировать только одну таблицу стилей, которая будет содержать наши ограниченные стили AMP. Какой лучший подход? Любая помощь очень ценится.

Answer 1

Я раньше не создавал приложение AMP, поэтому я не уверен на 100%, что это применимо к вам, но вы должны иметь возможность импортировать таблицу стилей на верхнем уровне своего приложения, и все компоненты под ней должны наследовать стили.

Другой альтернативой может быть использование styled-components библиотека (которая работает в Gatsby), поэтому вы должны включать только стили, необходимые для ваших компонентов, встроенных в ваш JSX/TSX.