我试图在单个 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。
样品:
...
import * as styles from '../components/partner.module.sass'
export const PartnerPageTemplate = ({ title, content, contentComponent }) => {
...
return (
<section className={`${styles.section} ${styles.sectionGradient}}`}>
...
</section>
)
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句