CODEWITHSUNDEEP
typescript
dagda1
dagda1

Reputation: 28860

cannot use import statement for scss files with typescript

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

Upvotes: 4

Views: 589

Answers (1)

niiyeboah
niiyeboah

Reputation: 1359

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" }
    ]
}

Upvotes: 8

Related Questions