css - 在 gatsby 中导入 css 的警告

Question

在我的 gatsby 元素中，我收到了将样式导入文件 的警告页面/index.js

import { Link } from "gatsby"
import React from "react"
import Layout from "../components/Layout"
import style from "../styles/home.module.css"

export default function Home() {

  return (
    <Layout>
      <section className={style.header}>
        <div>
          <h2>Design</h2>
          <h3>Develop & deploy</h3>
          <p>Become web ninja</p>
          <Link to="/projects" className={style.btn}>
            My Portfolio Projects
          </Link>
        </div>
        <img src="banner.png" alt="site banner" style={{ maxWidth: "80%" }} />
      </section>
    
    </Layout>
  )
}

warn Attempted import error: '../styles/home.module.css' does not contain a default export (imported as 'style').我正在使用模块样式表。所以 home.module.css 看起来像这样

.header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
  align-items: center;
}
.header h2 {
  font-size: 4em;
}
.header h3 {
  font-size: 3em;
  font-weight: 400;
  margin-bottom: 20px;
}
.btn {
  display: inline-block;
  background: #d42990;
  padding: 10px 16px;
  border-radius: 10px;
  margin-top: 20px;
  font-weight: 500;
}

这是我正在使用的 gatsby 版本

  "gatsby": "^3.0.3",
    "gatsby-source-filesystem": "^3.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"

工作树看起来像

.
├── components
│   ├── Layout.js
│   └── Navbar.js
├── node
│   ├── bar.txt
│   └── foo.txt
├── pages
│   ├── 404.js
│   ├── about.js
│   ├── index.js
│   └── projects
│       └── index.js
└── styles
    ├── global.css
    ├── home.module.css
    └── project.module.css

我不知道是什么导致我运行时出现错误

gatsby develop

它抛出错误为

The page didn't server render (SSR) correctly

最初的 gatsby 版本是 v2，我在元素中升级到 v3。所以我不知道 SSR 错误的原因是什么。如果我跳过 SSR 它会抛出类似的错误

_styles_home_module_css__WEBPACK_IMPORTED_MODULE_3__.default is undefined

有人可以帮我吗？

Answer 1

你可以试试这个:

import * as style from "../styles/home.module.css"

https://www.gatsbyjs.com/docs/tutorial/part-two/#-build-a-new-page-using-css-modules