Can't import CSS/SCSS modules. TypeScript says "Cannot Find Module"

Solution 1:

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;
}

Solution 2:

Here is a complete configuration that works for me (I just spent an hour of painful trial and error on this - in case anybody runs into the same issues):

TypeScript + WebPack + Sass

webpack.config.js

module.exports = {
  //mode: "production", 
    mode: "development", devtool: "inline-source-map",

    entry: [ "./src/app.tsx"/*main*/ ], 
    output: {
        filename: "./bundle.js"  // in /dist
    },
    resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension.
        extensions: [".ts", ".tsx", ".js", ".css", ".scss"]
    },
    module: {
        rules: [

            { test: /\.tsx?$/, loader: "ts-loader" }, 

            { test: /\.scss$/, use: [ 
                { loader: "style-loader" },  // to inject the result into the DOM as a style block
                { loader: "css-modules-typescript-loader"},  // to generate a .d.ts module next to the .scss file (also requires a declaration.d.ts with "declare modules '*.scss';" in it to tell TypeScript that "import styles from './styles.scss';" means to load the module "./styles.scss.d.td")
                { loader: "css-loader", options: { modules: true } },  // to convert the resulting CSS to Javascript to be bundled (modules:true to rename CSS classes in output to cryptic identifiers, except if wrapped in a :global(...) pseudo class)
                { loader: "sass-loader" },  // to convert SASS to CSS
                // NOTE: The first build after adding/removing/renaming CSS classes fails, since the newly generated .d.ts typescript module is picked up only later
            ] }, 

        ]
    }
}; 

Also put a declarations.d.ts in your project:

// We need to tell TypeScript that when we write "import styles from './styles.scss' we mean to load a module (to look for a './styles.scss.d.ts'). 
declare module '*.scss'; 

And you will need all these in your package.json's dev-dependencies:

  "devDependencies": {
    "@types/node-sass": "^4.11.0",
    "node-sass": "^4.12.0",
    "css-loader": "^1.0.0",
    "css-modules-typescript-loader": "^2.0.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "ts-loader": "^5.3.3",
    "typescript": "^3.4.4",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  }

Then you should get a mystyle.d.ts next to your mystyle.scss containing the CSS classes you defined, which you can import as a Typescript module and use like this:

import * as styles from './mystyles.scss'; 

const foo = <div className={styles.myClass}>FOO</div>; 

The CSS will automatically be loaded (injected as a style element into the DOM) and contain cryptic identifiers instead of your CSS classes in the .scss, to isolate your styles in the page (unless you use :global(.a-global-class) { ... }).

Note that the first compile will fail whenever you add CSS classes or remove them or rename them, since the imported mystyles.d.ts is the old version and not the new version just generated during compilation. Just compile again.

Enjoy.

Solution 3:

Just add the file typings.d.ts containing:

declare module "*.module.css";

and remember to declare your css files with 'module'. for example styles.module.css

importing:

import React from 'react';
import styles from './styles.module.css'