How to fix: Cannot find module 'widgets/example.scss' or its corresponding type declarations?

Question

typescript

Contents of mainWidgets.ts file :

/* eslint-disable sonarjs/no-duplicate-string */
const mainWidgets = [
  {
    container: '.cooperation-list',
    controller: (): void => {
      import(/* webpackChunkName: "swiper_style" */ 'widgets/shaked_swiper.scss');
      import(/* webpackChunkName: "cooperation_slider" */ 'widgets/cooperation_slider.scss');
    },
  },
  {
    container: '.kh-cookie-section',
    controller: (): void => {
      import(/* webpackChunkName: "cookie_section" */ 'widgets/cookie_section.scss');
    },
  },
  ...
];

export default mainWidgets;

A simple // @ts-ignore is not an option. Need a solution

Answer 1

At the root of the project, create a file with the extension .d.ts so that the name does not match other files in the neighborhood, for example global.d.ts and write the following there:

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