使用 gatsby-plugin-google-amp 在 Gatsby 中创建 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 中。