Can’t import CSS/SCSS modules. TypeScript says “Cannot Find Module”

by

TypeScript does not know that there are files other than .tsor .tsx so it will throw an error if an import has an unknown file suffix.

If you have a webpack config that allows you to import other types of files, you have to tell the TypeScript compiler that these files exist. To do so add a declaration file in which you declare modules with fitting names.

The content of the module to declare depends on the webpack loader used for the file type. In a webpack configuration that pipes *.scss files through sass-loader → css-loader → style-loader, there will be no content in the imported module, and the correct module declaration would look like this:

// declaration.d.ts
declare module '*.scss';

If the loaders are configured for css-modules just extend the declaration like this:

// declaration.d.ts
declare module '*.scss' {
    const content: Record<string, string>;
    export default content;
}

More Related Contents:

  1. Modules vs. Namespaces: What is the correct way to organize a large typescript project?
  2. The difference between “require(x)” and “import x”
  3. Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index
  4. TypeScript function overloading
  5. get and set in TypeScript
  6. How can I see the full expanded contract of a Typescript type?
  7. typescript interface require one of two properties to exist
  8. Calling webpacked code from outside (HTML script tag)
  9. How do you emulate nominal typing in TypeScript?
  10. Typescript: check if a type is a union
  11. How do you produce a .d.ts “typings” definition file from an existing JavaScript library?
  12. TypeScript – extract interface members only – possible?
  13. Typescript Interface – Possible to make “one or the other” properties required?
  14. Forcing excess-property checking on variable passed to TypeScript function
  15. Combining generics with index type
  16. Why can Typescript not figure out the type in my code?
  17. Angular no provider for NameService
  18. TypeScript interface implementing doesn’t check method parameters
  19. TypeScript and field initializers
  20. What does the tsconfig option “lib” do?
  21. Get function parameter names and types in TypeScript
  22. Typescript: Why type alias satisfies a constraint but same interface doesn’t?
  23. TypeScript: Define a union type from an array of strings
  24. Get route query params
  25. How to get a variable type in Typescript?
  26. TypeScript export imported interface
  27. How to create an Observable from static data similar to http one in Angular?
  28. What is exactly the ‘static side’ and the ‘instance side’ in typescript?
  29. get dictionary/object keys as tuple in typescript
  30. Can I force the TypeScript compiler to use nominal typing?

Leave a Comment