外部CSS无法在Gatsby React项目中工作

Question

我不确定这是否是在gatsby中使用CSS的正确方法，但是由于某种原因，我的外部样式未在gatsby项目中应用。

这就是我正在做的

import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import "./header.css"

const Header = (props) => {
  return (
  <header
    style={{
      background: `black`,
      marginBottom: `1.45rem`,
    }}
  >
    <div
      style={{
        margin: `0 auto`,
        maxWidth: 960,
        padding: `1.45rem 1.0875rem`,
      }}
    >
      <h1 style={{ margin: 0 }}>
        <Link
          to="/"
          style={{
            color: `white`,
            textDecoration: `none`,
          }}
        >
          {props.siteTitle} <span className="header-description"> {props.description} </span>
        </Link>
      </h1>
    </div>
  </header>
  )
}

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

这是我的header.css

.header-description {
  font-size: 12;
}

Answer 1

您的CSS无效。 font-size除0之外不能有无单位的值。

也许您希望它成为12px？

Answer 2

我通常要做的是创建index.css并将其导入到层组件（或任何其他包装组件）中，然后将单个/唯一/模块导入到index.css中。因此，主要的index.css变得像css文件的集线器，然后仅一次导入。好吧，显然，如果您要使用css模块，则必须将其导入到react组件中，但是从外观上看，您只是在使用类名。所以...是的，尝试我的方法，也许有帮助吗？在gatsby docs中，还有关于如何导入和使用css和各种样式化方法的4个教程。