6

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.

CircularRecursion
  • 450
  • 1
  • 6
  • 18

2 Answers2

2

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.

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • Thanks but I still get the same error. I tried removing the plugin and reinstalling but that had no effect. – CircularRecursion Mar 05 '21 at 13:29
  • 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 – Ferran Buireu Mar 05 '21 at 13:39
  • 1
    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. https://github.com/gatsbyjs/gatsby/issues/30037 – CircularRecursion Mar 05 '21 at 15:46
  • Thanks for the insights! I've updated the answer with the workaround. Have you finally fixed it downgrading the dependency? – Ferran Buireu Mar 05 '21 at 15:50
  • 1
    Downgrading fixes it for the time being! – CircularRecursion Mar 05 '21 at 17:52
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>
}
Dr Gunnar Mallon
  • 21
  • 1