SASS 尽管只导入到单个页面,但仍将样式应用于整个网站

高速

我试图在单个 js 页面上应用 SASS 文件,但导入在整个网站上进行。

这是我的 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
      }
    }
  }

每当我刷新或尝试切换到另一个页面时,所有内容(我认为这是由于我的 sass 文件中的 html 和 body 标签造成的)都在褪色(尽管我只是想让 Markdown 页面中的文章淡入) 无论如何 SASS只能申请和处理一个 js 页面而不是我的所有组件吗?

谢谢

加布里埃尔·林纳西

只需使用 DOCS https://www.gatsbyjs.com/docs/how-to/styling/css-modules/中所述的 CSS 模块,对于其他全局性的,请继续使用全局 css。

样品:

  1. 将您的样式文件重命名为 partner.module.sass 并导入
  2. 将带有双破折号(section--gradient)的规则重命名为驼峰式(sectionGradient)
...
import * as styles from '../components/partner.module.sass'

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章