反应 CSS 模块导入与 typescript 不兼容

Question

I want to use css modules in my react application. I installed 'typings-for-css-modules-loader' nuget package and configure in webpack.config.js like this

test: /\.css$/,
use: [
    'style-loader',
    '@teamsupercell/typings-for-css-modules-loader',
    {
        loader: "css-loader",
        options: {
            modules: true,
        }
    }
]

file styles.css.d.ts is generated and looks like this:

export interface IStylesCss {
  x: string;
}

export const locals: IStylesCss;
export default locals;

i am using awesome-typescript-loader which is configured in webpack.config.js as follows:

{
    test: /\.tsx?$/,
    use:
    {
        loader: "awesome-typescript-loader"
    }
},

Here is a problem description:

If i use import * as styles from './styles.css'; + className={styles.x} not working due to compilation error 'Property 'x' does not exist on type...'

className={styles.default.x} do not work either because default is undefined.

default import import styles from './styles.css'; + className={styles.x} not working, again, a default is undefined.

import * as styles from './styles.css'; + className={(styles as any).x} is working but i loose strong typing and it doesnt look correct solution to me.

Answer 1

Setting allowSyntheticDefaultImports and esModuleInterop to true in tsconfig.json asi hotfix worked for me. Waiting for fix.