盖茨比：使用带有 Typescript 的 SASS 模块答案

【问题标题】：Gatsby: Using SASS module with Typescript盖茨比：使用带有 Typescript 的 SASS 模块
【发布时间】：2019-11-20 00:18:45
【问题描述】：

我正在尝试让 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。

【问题讨论】：

标签： typescript sass gatsby css-modules

【解决方案1】：

将"esModuleInterop": true 添加到tsconfig.json。
添加文件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;
}

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

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

【讨论】：