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

Question

我正在尝试学习 Gatsby，但在将 SCSS 中的样式导入主页后，我一直坚持使用它。

这是我的主页 (index.js)，它正在加载 SCSS 并将其与 React JSX 一起使用。

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 对您的样式进行 treeshake。理想情况下，您应该像这样导入每个命名模块：

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

并申请为：

<main className={container}>

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

Using styles from scss or css into Gatsby doesn't work

reactjs

webpack

gatsby