TypeScript в целом никак не смотрит на webpack. То есть webpack отвечает за различные loaders (какую программу для обработки каких файлов использовать), а TS смотрит на типы. SCSS и т.п. файлы - это не JS-файлы, которые TS мог бы просто так загрузить и разобраться что там за сущности и какие типы. Поэтому он и ругается, что не понимает что это вообще такое (хотя импортируется как JS). В таких случаях создают общий тип. К примеру в том же next-js тоже такое есть.
/// <reference types="node" />
// Extend the NodeJS namespace with Next.js-defined properties
declare namespace NodeJS {
interface Process {
readonly browser: boolean
}
interface ProcessEnv {
readonly NODE_ENV: 'development' | 'production' | 'test'
}
}
declare module '*.module.css' {
const classes: { readonly [key: string]: string }
export default classes
}
declare module '*.module.sass' {
const classes: { readonly [key: string]: string }
export default classes
}
declare module '*.module.scss' {
const classes: { readonly [key: string]: string }
export default classes
}
То есть он ТС-у говорит, что результат такого импорта будет объект с ключ-значение "строка-строка".
declare module '*.svg' {
const value: string
export default value
}
declare module '*.png' {
const value: string
export default value
}
declare module '*.jpg' {
const value: string
export default value
}
declare module '*.jpeg' {
const value: string
export default value
}
declare module '*.ico' {
const value: string
export default value
}
Попробуй у себя создать папку @types и в нем styles.d.ts и прописать
declare module '*.module.sass' {
const classes: { readonly [key: string]: string }
export default classes
}
declare module '*.module.scss' {
const classes: { readonly [key: string]: string }
export default classes
}
А то, что у тебя автоматически создавался файл index.module.scss.d.ts, то это вопрос уже к той программе, которую ты вызывал через yarn start. Она смотрит, что используется TS и сама прописывает нужное. Такое поведение и в нексте есть. Но просто так ничего ен будет создаваться.