typescript can't find module less

Question

I use react and webpack to build web SPA but, typescript can't find resolve the less file

work file like this ⬆️

Please show more context (directory structure with file names, etc). — Sumner Evans, Sep 30 '17 at 09:09
Please [don’t post images of code, error messages, or other textual data.](https://meta.stackoverflow.com/questions/303812/discourage-screenshots-of-code-and-or-errors) — Filip Seman, Jan 31 '22 at 09:49
you can refer this as well [How to import a scss file into a typescript file](https://stackoverflow.com/a/60029264/2443988) — Sumit Ramteke, May 09 '23 at 06:16

felixmosh · Accepted Answer · 2020-03-15T12:52:01.840

46

Just create a new declaration file (externals.d.ts) with declare module '*.less'.

Edit If you are using css-modules, you can define these types to match the return value:

declare module '*.less' {
  const resource: {[key: string]: string};
  export = resource;
}

Add that file to the includes array of your tsconfig.json file.

// tsconfig.json
{
   compilerOptions: {...}
   includes: [
      './path/to/the/new/file/externals.d.ts'
   ]
}

edited Mar 15 '20 at 12:52

answered Sep 30 '17 at 09:12

felixmosh

Killed couple of _hours_, trying to solve this %) Thank you for help! – ankhzet Jun 30 '18 at 05:57

score 13 · Answer 2 · answered May 26 '20 at 10:38

13

Add to src/react-app-env.d.ts or declaration.d.ts

declare module '*.less';

or if you use css-modules

declare module '*.module.less' {
  const classes: { [className: string]: string };
  export default classes;
}

answered May 26 '20 at 10:38

Igor Sukharev

2 Answers2