TypeScript Gatsby project cannot find scss module exports despite custom type declaration

Question

I have a simple Gatsby project that can't find the SCSS module properties that I am trying to import. I'm using 'gatsby-plugin-sass' version 5.24.0, and Gatsby 4.24.2.

For example, I have a Footer.tsx component and a corresponding Footer.module.scss file that I use like this:

import * as styles from "./css/Footer.module.scss";

const Footer: React.FC = () => {
  return (
    <div className={styles.navContainer}>
      <div className="container">
        <div className={styles.navWrapper}>

I have a custom.d.ts file for the modules like this:

declare module "*.scss" {
  const content: Record<string, string>;
  export default content;
}

declare module "*.module.scss" {
  const content: Record<string, string>;
  export default content;
}

And my gatsby-config.js has these lines to resolve the plugins:

  plugins: [
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-fontawesome-css-2`,
    {
      resolve: `gatsby-plugin-sass`
    },

However, everywhere in VS Code properties like 'navContainer' and 'navWrapper' give errors of "Property 'navWrapper' does not exist on type 'typeof import("*.scss")'.ts(2339)". My code compiles when I use // @ts-nocheck but I'd prefer to understand why this isn't working.

When I change the import declaration to

import styles from "./css/Footer.module.scss";

As suggested here the errors disappear but my code no longer compiles. I also tried downgrading the gatsby-plugin-sass to version 4.0.0.

I've also reviewed these similar questions, but I've already tried their solutions:

Cannot import CSS module in .tsx file

Can't import CSS/SCSS modules. TypeScript says "Cannot Find Module"

Gatsby SCSS Module not compiling

Typescript type error property does not exist