Gatsby-Warn尝试导入错误:'css'不包含默认导出(导入为'样式')

Gatsby - Warn Attempted import error: #39;css#39; does not contain a default export (imported as #39;styles#39;)(Gatsby-Warn尝试导入错误:#39;css#39;不包含默认导出(导入为#39;样式#39;))

本文介绍了Gatsby-Warn尝试导入错误:'css'不包含默认导出(导入为'样式')的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我从Gatsby开始,在我的应用程序中,当我运行命令时 ‘Gatsby Developer’,我在终端中收到了这样的警告:

警告尝试导入错误:‘../Style/home.mode.css’不包含默认导出(作为‘Style’导入)。

然后,当我尝试加载页面时,这是不可能的

Unhandled Runtime Error 
Cannot read property 'header' of undefined 
<section className={styles.header}>

这是我的代码(index.js文件)的一部分:

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

export default function Home({ data }) {
  return (
  <Layout>
     <section className={styles.header}>

这是我的css模块的一部分(文件home.mode.css):

.header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
  align-items: center;
}

我的css模块哪里做错了?

推荐答案

在新版本的Gatsby(v3以上)中,需要将css模块作为ES模块导入:

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

应用于您的代码:

import * as styles from '../styles/home.module.css'
请记住,这不是推荐的导入css模块的方式,因为您不允许webpack更改您的样式。理想情况下,您应该导入所需的命名模块,如:

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

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

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

这篇关于Gatsby-Warn尝试导入错误:&#39;css&#39;不包含默认导出(导入为&#39;样式&#39;)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:Gatsby-Warn尝试导入错误:&#39;css&#39;不包含默认导出(导入为&#39;样式&#39;)

基础教程推荐