Creating AMP page in Gatsby using gatsby-plugin-google-amp but pulling in all site styles

user_3498920 0
Viewed 575

I appreciate the plugin is no longer maintained in it's current form (https://www.gatsbyjs.org/packages/gatsby-plugin-google-amp/?=Amp) but wanted to use this as base for adding AMP pages to my site. I've installed the plugin fine and am able to create AMP versions of my required pages.

However whenever I try and import a CSS file or module I end up with all styles for my whole site being automatically prepended to the page (and hence invalidating the AMP page). How can I only import a single stylesheet? I've tried with CSS modules and no joy:

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

With no css import the pages validate fine. I only want to import a single stylesheet which will contain our limited AMP styles. Whats the best approach? Any help much appreciated.

gatsby-plugin amp-html gatsby
1 Answers

I've not built an AMP app before, so I'm not 100% positive this will apply to you but you should be able to import the stylesheet at the top level of your app and all components under it should inherit the styles.

Another alternative may be to use styled-components library (which works in Gatsby) and so you'd only include the styles necessary for your components inline with your JSX/TSX.

user_2395230
Related