在Gatsby中使用scss或css中的样式不起作用

Question

我正在尝试学习Gatsby，在我将其导入到主页后，我仍然坚持使用SCSS中的样式。

这是我的主页(index.js)，它通过React JSX加载和使用SCSS。

import * as React from "react"
import styles from '../styles/home.module.scss'

const IndexPage = () => {
  return (
    <main className={styles.container}>
      <h1 className={styles.title}>Helloworld</h1>
    </main>
  )
}

export default IndexPage

这些都是我目前正在尝试导入的样式。

.container{
    background: purple;
}

.title{
    font-size: 5em;
    color: white;
}

我使用的是从Gatbsy自动安装的SCSS，这里是Gatsby的配置文件。

module.exports = {
  siteMetadata: {
    siteUrl: "https://www.yourdomain.tld",
    title: "gatsby-learning",
  },
  plugins: ["gatsby-plugin-sass"],
};

这就是我在应用程序运行时得到的奇怪的错误。

​

Answer 1

在Gatsby v3中，您需要将样式作为ES模块导入，如下所示：

import * as styles from '../styles/home.module.scss'

然后，您将能够在以下位置使用CSS模块：

<main className={styles.container}>

请记住，这不是推荐的导入CSS模块的方式，因为您不允许webpack对您的样式进行树形分解。理想情况下，您应该导入每个命名模块，如下所示：

import { container } from '../styles/home.module.scss'

并应用为：

<main className={container}>