初始化一个Gatsby(5.13.3)项目时,会有选择使用sass和typescript的选项,但是对于从 scss 文件中导入的形式还需要另外的设置:
在 src 目录下创建 global.d.ts 内容如下:
declare module "*.scss" {
const content: { [className: string]: string };
export = content;
}
然后在 tsx 中使用 styles 的格式为:
import * as React from "react";
import type { HeadFC, PageProps } from "gatsby";
import * as styles from "./index.module.scss"; /// Here
const IndexPage: React.FC<PageProps> = () => {
return <main className={styles.main}>Some text...</main>; /// Here
};
export default IndexPage;
export const Head: HeadFC = () => <title>Title</title>;
`import styles from "./index.module.scss";` 这样也会报错。
以上就是全部了
----------
如果有问题,请检查项目初始时生成的一些关键配置,罗列如下:
1. package.json 中安装了 gatsby-plugin-sass 依赖;
2. gatsby-config.ts 中的 plugins 中配置了 gatsby-plugin-sass。