SASS 将样式应用于整个网站，尽管仅导入到单个页面中

Posted 2023-03-08

【中文标题】SASS 将样式应用于整个网站，尽管仅导入到单个页面中

【英文标题】：SASS Applies style to the whole website despite only imported into a single page

【发布时间】：2021-06-19 00:03:36

【问题描述】：

我正在尝试在单个 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 页面而不是我的所有组件吗？

谢谢

【参考方案1】：

只需使用 DOCS https://www.gatsbyjs.com/docs/how-to/styling/css-modules/ 中所述的 CSS 模块，其余的都是全局的，继续使用全局 css。

示例：

将您的样式文件重命名为 partner.module.sass 并按原样导入 将带有双破折号 (section--gradient) 的规则重命名为 camelCase (sectionGradient)

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

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

【讨论】：

谢谢！为我工作。抱歉，我似乎没有正确阅读文档。

【参考方案2】：

当然，这是使用您的方法的正常行为。请记住，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 规则应仅应用文件中导入的元素。

或者，如果要添加general styles，为了避免通过组件进行不必要的重复请求，只需在gatsby-browser.js中添加以下行：

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

【讨论】：

谢谢，我也试过了，效果很好