typescript - Gatsby:将 SASS 模块与 Typescript 结合使用

Question

我正在尝试让 typescript 和 sass 模块在 Gatsby 项目中协同工作。

我正在使用 gatsby-plugin-ts-loader 和 gatsby-plugin-sass 插件。

index.tsx

import * as React from 'react';
import styles from './index.module.scss'; // TS2307: Cannot find module './index.module.scss'.

export default () => <div  className={styles.root}>
    <h1>Hello Gatsby!</h1>
</div>;

index.module.scss

.root {
  h1 {
    color: red;
  }
}

我收到以下错误 TS2307: Cannot find module './index.module.scss'.。 如果我将 @ts-ignore 放在 scss 导入行之前，我会得到 TypeError: index_module_scss_1.default is undefined。

Answer 1

1. 将 "esModuleInterop": true 添加到 tsconfig.json。
2. 添加一个文件src/global.d.ts，内容为:

// necessary to make scss module work. See https://github.com/gatsbyjs/gatsby/issues/8144#issuecomment-438206866
declare module '*.scss' {
    const content: {[className: string]: string};
    export = content;
}

1. 添加 import import styles from './index.module.scss';
2. 如果它编译了，但 css 没有显示，请确保它是正确的，比如混淆 .root 和 root ;)。

来源https://github.com/gatsbyjs/gatsby/issues/8144#issuecomment-438206866