TypeError：无法读取未定义的属性“标题” - Gatsby SCSS答案

【问题标题】：TypeError: Cannot read property 'title' of undefined - Gatsby SCSSTypeError：无法读取未定义的属性“标题” - Gatsby SCSS
【发布时间】：2021-03-09 19:12:28
【问题描述】：

我对此感到很头疼，我理解错误的含义，但无法深入了解它。

{headerStyles.title} 只是不断地引发这个 TypeError。据我所知，我的所有模块语法都是正确的。

header.js

import headerStyles from "./header.module.scss"

return (
    <div className={headerStyles.header}>
      <h1>
        <Link className={headerStyles.title} to="/">
          {data.site.siteMetaData.title}
        </Link>
      </h1>
    </div>
)

header.module.scss

.title {
  color: black;
  font-size: 3rem;
  text-decoration: none;
}

【问题讨论】：

您运行的是哪个版本的react-scripts？请记住，CSS 模块仅受 react-script@2.0.0 及更高版本支持。 header.module.scss 的路径是否 100% 正确？
你的路径正确吗？
@idkwhatsgoingon 路径是 100% 正确的，因为它们在同一个目录中并且我正在运行 react-scripts@4.0.1。我正在运行 sass@1.29.0，因为 node-sass 最近已被弃用。

标签： reactjs sass gatsby

【解决方案1】：

如果您找不到问题，我有一个替代解决方案。只需使用“.scss”文件，而不是“.module.scss”。导入 scss 文件并照原样使用类名。

return (
<div className={"header"}>
  <h1>
    <Link className={"title"} to="/">
      {data.site.siteMetaData.title}
    </Link>
  </h1>
</div>

)

【讨论】：

【解决方案2】：

你可以使用import * as headerStyles from "./header.module.scss"

【讨论】：

我很困惑。正如OP所描述的那样，它曾经为我工作。我刚刚开始了一个新项目，不得不使用这种方法。发生了什么变化？
@freethebees - 运气好吗？遇到同样的问题，不知道怎么回事
@fullStackChris 是的。这一切都发生在从 Gatsby 2 到 Gatsby 3 的变化中。它在 release notes 中。不过，我不是 Gatsby 的普通用户，所以我错过了这一点，并假设从旧项目中复制一些意大利面可以正常工作。希望对您有所帮助。