cannot use import statement for scss files with typescript

Question

I have added these declarations to an index.d.ts files:

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

But when I try and import a default import like this:

import styles from './Application.module.scss';

I get this error:

Cannot find module './Application.module.scss'.ts

Answer 1

In order to use SCSS modules in TypeScript, you will need style-loader , typings-for-css-modules-loader and sass-loader .

Use the following .scss rule in your webpack.config.js :

{
    test: /\.scss$/,
    include: [
        path.resolve(__dirname, "src/raw")
    ],
    use: [
        { loader: "style-loader" },
        {
            loader: "typings-for-css-modules-loader",
            options: {
                namedexport: true,
                camelcase: true,
                modules: true
            }
        },
        { loader: "sass-loader" }
    ]
}