Gatsby typescript 项目配置 scss

最新推荐文章于 2026-06-21 11:39:51 发布

原创最新推荐文章于 2026-06-21 11:39:51 发布 · 380 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#typescript #scss #javascript

收录于

初始化一个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。