Gatsby SCSS Module not compiling

user_4174640 0
Viewed 1487

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.

gatsby-plugin gatsby
2 Answers

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.

user_55853710

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