Unable to use css/scss module in webpack or rollup.

[disguised-uchiha]

When i do this:

import styles from "./TestComponent.module.scss"; I get a typescript error. Cannot find module './TestComponent.module.scss' or its corresponding type declarations. I used @ts-ignore but then on npm run storybook i get an error:

ERROR in ./src/TestComponent/TestComponent.tsx
Module not found: Error: Can't resolve './TestComponent.module.scss' in '/Users/harshboricha/Desktop/rcl2/src/TestComponent'

[MaximKudryavtsev]

Hello! I faced with this issue too and found decision. You need create *.d.ts file and paste this code:

declare module '*.less' {
  const content: Record<string, string>;
  export default content;
}

It helped me and I hope it will help you

[disguised-uchiha]

Thank you, It worked. I create a global.d.ts file with content

declare module "*.scss";
declare module '*.less' {
  const content: Record<string, string>;
  export default content;
}

[celineotter]

I have not been successful at compiling with css modules + scss even with the global.d.ts above and extending the rollup plugin definition as:

    postcss({
        modules: true,
        use: ["sass"]
    }),

@disguised-uchiha or Harvey any other suggestions to try please? rollup has been such a headache to get this working when it is out of the box with webpack CRA.