Gatsby SCSS模块未编译

Question

运行盖茨比3.0.1版本，sass 1.32.8。我刚开始摆弄一些东西，就遇到了一个奇怪的问题，我解不出来。

./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').

如果不知道插件是如何工作的，我看不出有任何问题会导致这个

Answer 1

使用方式:

module.exports = {
/* Your site config here */
plugins: [
{
resolve: `gatsby-plugin-sass`,
},
],
}

你不需要添加额外的实现来使用CSS模块，所以你可以省略它们。

此外，根据这个GitHub线程的解决方案是将插件降级到v4。

Answer 2

尝试导入*作为homestyle，你应该是金色的:

import React from "react"
import * as homeStyles from '../styles/scss/index.module.scss'
export default function Home() {
return <div className={homeStyles.testElement}>Hello world!</div>
}