Gatsby SCSS 模块未编译

Question

运行 Gatsby 版本 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 thread解决方案是将插件降级为v4。

Answer 2

尝试将 * 导入为 homeStyles，你应该很成功：

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>
}

Gatsby SCSS 模块未编译

Gatsby SCSS Module not compiling

gatsby

gatsby-plugin