我想在我的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}
正常工作,但我没有进行强类型输入,对我来说它不是正确的解决方案。
在tsconfig.json中将allowSyntheticDefaultImports和esModuleInterop设置为true,因为asi修补程序对我有用。等待修复。