无法在 .tsx 文件中导入 CSS 模块

我正在使用 typescript 构建基本的 React 应用程序，但无法导入 CSS 文件索引.tsx file

我能够导入索引.css文件如下：

import './index.css'; 
//this import gives typescript error when running webpack 

但无法导入为

import * as Styles from './index.css';

这是我的webpack.config.js file

var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin')
var config = {
    mode:"none",
    entry:"./src/index.tsx",
    output:{
        path: path.resolve(__dirname,"dist"),
        filename: "bundle.js"
    },
    resolve:{
        extensions:[".ts", ".tsx", ".js"]
    },
    module:{
        rules:[
            {test:/\.tsx?$/, loader:"awesome-typescript-loader"},
            { test: /\.css$/, include: path.join(__dirname, 'src/'),
             loader:"typings-for-css-modules-loader" }
        ]
    },
    plugins:[new HtmlWebpackPlugin({
        template: './index.html'
    })]
};

module.exports = config;

我在发布之前尝试点击链接，但没有成功

如何在 .tsx 打字稿中包含 .css 文件？ https://stackoverflow.com/questions/41628247/how-to-include-css-file-in-tsx-typescript

如何将 css 文件导入到组件 .jsx 文件中 https://stackoverflow.com/questions/37143885/how-to-import-css-file-for-into-component-jsx-file/37144690#37144690

https://github.com/parcel-bundler/parcel/issues/616 https://github.com/parcel-bundler/parcel/issues/616

提前致谢

使用新版本的 React，要使用 CSS 模块，您无需在 Webpack 中配置任何内容或拒绝您的项目。 您需要做的就是：

1. Install css-modules-loader: https://github.com/gajus/react-css-modules https://github.com/gajus/react-css-modules
2. 更改文件名styles.css to styles.module.css

3. 将 css 文件导入到您的组件中：

   import styles from './styles.module.css'

4. 在组件中使用类名：

   <div className={styles.app}> Hello World </div>

演示项目：https://codesandbox.io/s/kwyr5p378o https://codesandbox.io/s/kwyr5p378o