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

我正在用typescript构建基本的react应用程序，但我无法在index.tsx文件中导入CSS文件

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;

我可以通过以下方式导入index.css文件：

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

但不能作为

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

这是我的webpack.config.js文件

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;

在发布之前我尝试了以下链接，但没有成功

---

提前感谢

在

css模块加载程序的键入

中，建议您将

css

作为

或者

import styles from './index.css';

或

---

在您的示例中，您缺少新版本React中的关键字

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

安装css模块加载程序

：

将文件名

styles.css

更改为

styles.module.css

将css文件导入组件：

从“./styles.module.css”导入样式

在组件中使用类名：

Hello World

---

演示项目：

我编辑了代码片段..很抱歉错误的代码在我的情况下，它工作正常，但给出了tslint错误“找不到模块。/index.css”。我从

https://github.com/zeit/styled-jsx

tslint搜索扩展名为

.ts

的文件，因此在您的情况下，tslint可能无法找到

index.css.ts

文件，因此它抛出错误“未找到模块”，我的css文件带有

.css

扩展名，而不是

.css.ts

。like:index.cssTypeScript不知道存在

.ts

或

.tsx

以外的文件，因此如果导入具有未知的文件后缀，它将抛出错误。如果您有一个允许您导入其他类型文件的网页包配置，您必须告诉TypeScript编译器这些文件存在我尝试了上述方法，但我得到以下错误

您可能需要一个合适的加载程序来处理此文件类型。>。foo{| color:chocolate；|}@./src/components/index.tsx 6:15-45

之后，我尝试了css加载程序，代码出现在final bundle.js文件中，但样式没有应用到组件。当我在htmlI中显式链接css文件时，该方法起作用。我没有使用create react应用程序模板。我正在从头开始构建，没有初始配置