Gatsby - 警告尝试导入错误:“css”不包含默认导出(导入为“样式”)
Posted
技术标签:
【中文标题】Gatsby - 警告尝试导入错误:“css”不包含默认导出(导入为“样式”)【英文标题】:Gatsby - Warn Attempted import error: 'css' does not contain a default export (imported as 'styles') 【发布时间】:2021-06-26 09:20:45 【问题描述】:我从 Gatsby 开始,在我的应用程序中,当我运行命令时 'gatsby develop',我在终端收到了这个警告:
警告尝试导入错误:“../styles/home.module.css”不包含默认导出(导入为“样式”)。
然后,当我尝试加载页面时,这是不可能的
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.module.css):
.header
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 40px;
align-items: center;
我的 CSS 模块有什么问题?
【问题讨论】:
【参考方案1】:在新版 Gatsby(v3 及以上)中,CSS 模块需要作为 ES Modules 导入:
import * as styles from './[componentName].module.css'
应用于您的代码:
import * as styles from '../styles/home.module.css'
请记住,这不是导入 CSS 模块的推荐方式,因为您不允许 webpack 对样式进行 treeshake。理想情况下,您应该导入所需的命名模块,例如:
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 - 警告尝试导入错误:“css”不包含默认导出(导入为“样式”)的主要内容,如果未能解决你的问题,请参考以下文章
如何避免警告:块样式 [mini-css-extract-plugin] GatsbyJS 中的冲突顺序?
gatsby-image:如何将处理后的图像导入 css 并与 background-image 属性一起使用