TypeScript declare specific SCSS module

Question

I'm trying to declare a specific SCSS module to import from TypeScript. I have this declaration file that is working well:

declare module '*.scss' {
  const styles: {
    a: string
    b: string
    c: string
  }

  export default styles
}

But I'd like to narrow down *.scss somehow so that this declaration file only applies to the SCSS file _variables.scss which is located in the same directory.

I have tried to replace *.scss with _variables.scss or ./_variables.scss but then TypeScript wasn't able to find the module declaration at all.

Is this possible with TypeScript?

Answer 1

You can do your module declaration like this. Read more on wildcard module declarations here.

declare module '*_variables.scss' {
  const styles: {
    a: string
    b: string
    c: string
  }

  export default styles
}