我正在嘗試學習 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"],
};
所以這是我在應用程式運行時遇到的奇怪錯誤。
uj5u.com熱心網友回復：
在 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}>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/314043.html