home.module.css import issue.
LostPoE opened this issue · 7 comments
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
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'
Just use import * as styles from 'path' and it will solve problem.
Thanks a lot guys!
You're welcome.
Just use import * as styles from 'path' and it will solve problem.
This worked for me
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
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+