scss file does not contain a default export (Gatsby and Sass)

user_15187513 0
Viewed 3081

I know my path is correct because it takes the styles if I don't add module to the extension. I'm working from a bootcamp which is over a year and a half old and trying to research any potential breaking changes, but having no such luck.

Says link is not defined and my scss file has no default export.

Thanks

.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
gatsby reactjs sass module
3 Answers

After updating gatsby to version 3, I was in the same situation.

* as sth would be fine if you want to import an entire module.

import * as headerStyles from "../styles/header.module.scss"
user_11618630 
import { link } from "../styles/header.module.scss"

Fixed it moments after posting with destructuring.

user_151875130 

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

user_150172100
Related