I’m trying to apply a SASS file on one single js page, but the import goes on the whole website.
Here is my partner.sass file :
html, body, .media article,img p animation-name: fade-in animation-fill-mode: both animation-duration: 1.5s @for $i from 1 to 60 .media article:nth-child(#{$i}) animation-delay: $i * 0.1s @keyframes fade-in 0% opacity: 0 100% opacity: 1
and here is my partner.js file :
import React from 'react' import PropTypes from 'prop-types' import { graphql } from 'gatsby' import Layout from '../components/Layout' import Content, { HTMLContent } from '../components/Content' import '../components/partner.sass' export const PartnerPageTemplate = ({ title, content, contentComponent }) => { const PageContent = contentComponent || Content return ( <section className="section section--gradient"> <div className="container"> <div className="columns"> <div className="column is-10 is-offset-1"> <div className="section"> <h2 className="title is-size-3 has-text-weight-bold is-bold-light"> {title} </h2> <PageContent className="content" content={content} /> </div> </div> </div> </div> </section> ) } PartnerPageTemplate.propTypes = { title: PropTypes.string.isRequired, content: PropTypes.string, contentComponent: PropTypes.func, } const PartnerPage = ({ data }) => { const { markdownRemark: post } = data return ( <Layout> <PartnerPageTemplate contentComponent={HTMLContent} title={post.frontmatter.title} content={post.html} /> </Layout> ) } PartnerPage.propTypes = { data: PropTypes.object.isRequired, } export default PartnerPage export const partnerPageQuery = graphql` query PartnerPage($id: String!) { markdownRemark(id: { eq: $id }) { html frontmatter { title } } }
Whenever I refresh or try to switch to another page, everything (which I believe is due to html and body tags from my sass file) is fading (although I just wanted my articles from the markdown page to fade-in) Is there anyway SASS can apply and handle only one js page instead of all my components ?
Thank you
Advertisement
Answer
Just use CSS Modules as stated in the DOCS https://www.gatsbyjs.com/docs/how-to/styling/css-modules/ and for the rest which is global, keep using global css.
Sample:
- Rename your style file to partner.module.sass and import as such
- Rename rules with double dash (section–gradient) to camelCase (sectionGradient)
... import * as styles from '../components/partner.module.sass' export const PartnerPageTemplate = ({ title, content, contentComponent }) => { ... return ( <section className={`${styles.section} ${styles.sectionGradient}}`}> ... </section> ) }