SASS Applies style to the whole website despite only imported into a single page

user_1980933 0
Viewed 55

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

graphql gatsby sass css javascript
2 Answers

Of course, this is normal behavior using your approach. Keep in mind that React components or pages, are isolated portions of code that in the end, are compiled and bundled together by webpack when generating the build output (gatsby build and gatsby develop).

In your case (and as you said), you are importing a SASS file, that affects the rest of the styles of the site because it points to html and body tags.

In your case, since your output is the .section section--gradient class, you may want to use:

.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

Note: wrap it inside .section section--gradient if necessary to apply the rules only to the descendants of .section section--gradient

Avoiding the unnecessary html and body tags (I don't think you want to apply a fade-in to all the html and body). Each SASS rule should apply only the elements in the file where is imported.

Alternatively, if you want to add general styles, to avoid unnecessary and repeated requests through components, just add the following line in the gatsby-browser.js:

import "./src/styles/global.css" // change it to your path to global.sass
user_55853710

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:

  1. Rename your style file to partner.module.sass and import as such
  2. 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>
  )
}
user_58650990
Related