reactjs - gatsby sass 不工作——导入错误

Question

我曾尝试在我的网站上使用 gatsby-plugin-sass，但发生了一个有趣的错误，见下文。

warn Attempted import error: './header.module.scss' does not contain a default export (imported as 'headerStyles').

我有一个header.module.scss，header.js其中包含：

import {Link} from "gatsby"

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

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

export default Header

所以我不知道该怎么办，请有人帮助我。谢谢

Answer 1

像这样导入它：

import {Link} from "gatsby"

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

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

export default Header

这是因为新的 Gatsby 模块导入。

您可以在此GitHub 线程中关注讨论的堆栈跟踪。