如何解决Gatsby SCSS 模块未编译
使用 sass 1.32.8 运行 Gatsby 3.0.1 版。我刚刚开始尝试一些东西,但遇到了一个我无法解决的奇怪问题。
./gatsby-config.js
module.exports = {
/* Your site config here */
plugins: [
{
resolve: `gatsby-plugin-sass`,options: {
implementation: require("sass"),},],}
./src/pages/index.js
import React from "react"
import homeStyles from '../styles/scss/index.module.scss'
export default function Home() {
return <div className={homeStyles.testElement}>Hello World!</div>
}
./styles/scss/index.module.scss
.testElement {
font-size: 72px;
}
我得到的错误是 Attempted import error: '../styles/scss/index.module.scss' does not contain a default export (imported as 'homeStyles').
如果我尝试使用 import * as homeStyles from '../styles/scss/index/module.scss
,错误是:Attempted import error: 'testElement' is not exported from '../styles/scss/index.module.scss' (imported as 'homeStyles').
在不确切知道插件如何工作的情况下,我看不到任何会导致这种情况的问题。
解决方法
像这样使用:
module.exports = {
/* Your site config here */
plugins: [
{
resolve: `gatsby-plugin-sass`,},],}
您不需要添加额外的实现来处理 CSS 模块,因此您可以省略它们。
此外,根据此GitHub thread,解决方案是将插件降级为v4
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。