[SOLVED] Gatsby SCSS Module not compiling

Gatsby SCSS Module not compiling

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.

Solution

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.