scss文件不包含默认导出(Gatsby和Sass)
我知道我的路径是正确的,因为如果我不向扩展添加模块,它就会采用样式。我在一个已有一年半历史的训练营工作,并试图研究任何潜在的重大变化,但没有这样的运气。
说链接未定义,我的 scss 文件没有默认导出。
谢谢
.link {
color: green;
}
import React from "react"
import { Link } from "gatsby"
import headerStyles from "../styles/header.module.scss"
const Header = () => {
return (
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>
<Link className={headerStyles.link} to="/">
Home
</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/blog">Blog</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
</header>
)
}
export default Header
import React from "react"
import { Link } from "gatsby"
import headerStyles from "../styles/header.module.scss"
const Header = () => {
return (
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>
<Link className={headerStyles.link} to="/">
Home
</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/blog">Blog</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
</header>
)
}
export default Header
回答
将 gatsby 更新到版本 3 后,我处于同样的情况。
* as sth 如果你想导入整个模块就好了。
import * as headerStyles from "../styles/header.module.scss"
- It's not a bug, it’s working as intended: https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#css-modules-are-imported-as-es-modules