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.

Latrinalatrine

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.

Nevile

Thanks but I still get the same error. I tried removing the plugin and reinstalling but that had no effect. – Latrinalatrine

Try downgrading to Gatsby v2. The implementation of the v3 depends on the plugin's code so until they update it you may face some caveats or issues – Nevile

Turns out it was somewhat of an edge case. The newest version they release (4.0.1) which happens to have been released within the last 24hrs has a bug. Downgrading to 4.0.0 for the time being works. github.com/gatsbyjs/gatsby/issues/30037 – Latrinalatrine

Thanks for the insights! I've updated the answer with the workaround. Have you finally fixed it downgrading the dependency? – Nevile

Downgrading fixes it for the time being! – Latrinalatrine

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>
}

Doolie