home.module.css import issue.

[LostPoE]

I think they changed how to import css modules in 3.0.
import * as styles from '../styles/home.module.css'
vs
import styles from '../styles/home.module.css'

Thanks for the tutorial

[codingChewie]

You can also de-structure:

projects/index.js:

import { portfolio } from '../../styles/projects.module.css'

div becomes:

<div className={portfolio}>

index.js:

import { header, btn } from '../styles/home.module.css'

[crypt096]

Just use import * as styles from 'path' and it will solve problem.

[Matrix-citizen]

Thanks a lot guys!

[crypt096]

You're welcome.

[Deleted user]

Just use import * as styles from 'path' and it will solve problem.

This worked for me

[startakovsky]

Yes, the official instruction from Gatsby 4 docs is as mentioned above with the “import * as Xx from path”: https://www.gatsbyjs.com/docs/how-to/styling/css-modules/#css-module-example

[ecupaio]

Apparently this is an update as of v3 and on. Here's what the index.js should be changed to:

import React from "react"
import Layout from "../components/Layout"
// add * as styles to import all class names from home.module.css and store them as styles for use in the component
import * as styles from "../styles/home.module.css"

export default function Home() {
  return (
    <Layout>
      <section className={styles.header}>
        <div>
          <h2>Design</h2>
          <h3>Develop & Deploy</h3>
          <p>UX design & web developer based in Manchester.</p>
        </div>
      </section>
    </Layout>
  )
}

I got this from an answer in stackoverflow, as we all do, and Gatsby posted an explanation on how to convert your css module imports to work in v3+