React CSS 模块导入与打字稿不兼容

Question

我想在我的 react 应用程序中使用 css 模块。我安装了 'typings-for-css-modules-loader' nuget 包并像这样在 webpack.config.js 中配置

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

文件styles.css.d.ts 生成后如下所示：

export interface IStylesCss {
  x: string;
}

export const locals: IStylesCss;
export default locals;

我正在使用在 webpack.config.js 中配置的 awesome-typescript-loader，如下所示：

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

这是一个问题描述：

如果我使用 import * as styles from './styles.css'; + className={styles.x} 由于编译错误“类型上不存在属性“x”而无法工作...”

className={styles.default.x} 也不起作用，因为默认值未定义。

默认导入 import styles from './styles.css'; + className={styles.x} 不起作用，再次声明默认值未定义。

import * as styles from './styles.css'; + className={(styles as any).x} 正在工作，但我松散了强类型，对我来说它看起来不是正确的解决方案。

Answer 1

在 tsconfig.json 中将 allowSyntheticDefaultImports 和 esModuleInterop 设置为 true，因为热修复对我有用。等待修复。