gatsby sass is not working --import error

Question

I have tried to use gatsby-plugin-sass on my site, but there is a funny error happening see below.

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

I have a header.module.scss and the header.js which contains:

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

So I don't know what to do please someone culd help me. Thanks

Answer 1

Import it like:

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

This is because of the new Gatsby module importation.

You can follow the stack trace of the discussion in this GitHub thread.