score:31

Accepted answer

In the new version of Gatsby (v3 onwards), CSS modules need to be imported as ES Modules:

import * as styles from './[componentName].module.css'

Applied to your code:

import * as styles from '../styles/home.module.css'

Keep in mind that this is not the recommended way of importing CSS modules, since you are not allowing webpack to treeshake your styles. Ideally, you should import the needed named modules like:

import React from "react"
import { box } from './mystyles.module.css'

const Box = ({ children }) => (
  <div className={box}>{children}</div>
)

Further details: https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#css-modules-are-imported-as-es-modules


Related Query

More Query from same tag