scss 文件不包含默认导出（Gatsby 和 Sass）

Question

我知道我的路径是正确的，因为如果我不将模块添加到扩展中，它会采用样式。我在一个已有一年半历史的训练营工作，并试图研究任何潜在的重大变化，但没有这样的运气。

说链接未定义，我的 scss 文件没有默认导出。

谢谢

.link {
  color: green;
}

import React from "react"
import { Link } from "gatsby"
import headerStyles from "../styles/header.module.scss"

const Header = () => {
  return (
    <header>
      <h1>My Portfolio</h1>
      <nav>
        <ul>
          <li>
            <Link className={headerStyles.link} to="/">
              Home
            </Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/blog">Blog</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
    </header>
  )
}

export default Header

import React from "react"
import { Link } from "gatsby"
import headerStyles from "../styles/header.module.scss"

const Header = () => {
  return (
    <header>
      <h1>My Portfolio</h1>
      <nav>
        <ul>
          <li>
            <Link className={headerStyles.link} to="/">
              Home
            </Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/blog">Blog</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
    </header>
  )
}

export default Header

Answer 1

import { link } from "../styles/header.module.scss"

在使用解构发布后立即修复它。

Answer 2

将 gatsby 更新到第 3 版后，我也遇到了同样的情况。

* as sth 可以导入整个模块。

import * as headerStyles from "../styles/header.module.scss"

Answer 3

import * as headerStyles import './header.module.scss'