Gatsby SCSS Module not compiling

Question

Running Gatsby version 3.0.1, with sass 1.32.8. I've just started playing about with a few things and I've come into a weird problem that I cannot work out.

./gatsby-config.js

module.exports = {
  /* Your site config here */
  plugins: [
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        implementation: require("sass"),
      },
    },
  ],
}

./src/pages/index.js

import React from "react"
import homeStyles from '../styles/scss/index.module.scss'

export default function Home() {
  return <div className={homeStyles.testElement}>Hello world!</div>
}

./styles/scss/index.module.scss

.testElement {
  font-size: 72px;
}

The error I get is Attempted import error: '../styles/scss/index.module.scss' does not contain a default export (imported as 'homeStyles').

If I try with import * as homeStyles from '../styles/scss/index/module.scss the error is: Attempted import error: 'testElement' is not exported from '../styles/scss/index.module.scss' (imported as 'homeStyles').

Without knowing precisely how the plugin works, I cannot see any issues that would be causing this.

Answer 1

Use it like:

module.exports = {
  /* Your site config here */
  plugins: [
    {
      resolve: `gatsby-plugin-sass`,
    },
  ],
}

You don't need to add extra implementations to work with CSS modules, so you can omit them.

In addition, according to this GitHub thread the solution is to downgrade the plugin to v4.

Answer 2

Try to import * as homeStyles and you should be golden:

import React from "react"
import * as homeStyles from '../styles/scss/index.module.scss'

export default function Home() {
  return <div className={homeStyles.testElement}>Hello world!</div>
}