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 thread 中讨论的堆栈跟踪。

gatsby sass 不工作——导入错误

gatsby sass is not working --import error

reactjs

gatsby

gatsby-plugin