Блог

Я пытаюсь применить файл SASS на одной странице js, но импорт выполняется на всем веб-сайте.

Вот мой файл partner.sass :

 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
 

и вот мой partner.js файл :

 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
      }
    }
  }
 

Всякий раз, когда я обновляю или пытаюсь переключиться на другую страницу, все (что, как я полагаю, связано с тегами html и тела из моего файла sass) исчезает (хотя я просто хотел, чтобы мои статьи со страницы уценки исчезли)
Есть ли в любом случае SASS, который может применять и обрабатывать только одну страницу js вместо всех моих компонентов ?

Спасибо

Конечно, это нормальное поведение с использованием вашего подхода. Имейте в виду, что компоненты или страницы React-это изолированные части кода, которые в конечном итоге компилируются и объединяются webpack при создании выходных данных сборки ( gatsby build и gatsby develop ).

В вашем случае (и, как вы сказали), вы импортируете файл SASS, который влияет на остальные стили сайта, потому что он указывает html и body помечает.

В вашем случае, поскольку ваш вывод является .section section--gradient class , вы можете захотеть использовать:

 .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
 

Примечание: заверните его внутрь . section section--gradient при необходимости применять правила только к потомкам .section section--gradient

Избегая ненужных html body тегов и (я не думаю, что вы хотите применять скрытие ко всем html и body ). Каждое правило SASS должно применяться только к элементам в файле, в который импортируется.

В качестве альтернативы, если вы хотите добавить общие стили, чтобы избежать ненужных и повторяющихся запросов через компоненты, просто добавьте следующую строку в gatsby-browser.js :

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

Просто используйте модули CSS, как указано в ДОКУМЕНТАХ https://www.gatsbyjs.com/docs/how-to/styling/css-modules/ и для всего остального, что является глобальным, продолжайте использовать глобальный css.

Образец:

1. Переименуйте файл стиля в partner.module.sass и импортируйте как таковой
2. Переименуйте правила с двойной черточкой (раздел—градиент) в camelCase (sectionGradient)

 ...
import * as styles from '../components/partner.module.sass'

export const PartnerPageTemplate = ({ title, content, contentComponent }) => {
  ...
  return (
    <section className={`${styles.section} ${styles.sectionGradient}}`}>
       ...
    </section>
  )
}