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

Question

我正在使用打字稿构建基本的反应应用程序，但我无法在index.tsx文件中导入 CSS文件

我可以通过以下方式导入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;

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

如何在 .tsx 打字稿中包含 .css 文件？

如何将 css 文件导入到组件 .jsx 文件中

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

提前致谢

Answer 1

在typings-for-css-modules-loader 文档中，建议您导入cssas

任何一个

import styles from './index.css';

或者

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

在您的示例中，您缺少关键字from