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

Question

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

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

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

How to include .css file in .tsx typescript?

How to import css file for into Component .jsx file

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

预先感谢

Answer 1

在typings-for-css-modules-loader docs中，建议您将css导入为

两个

import styles from './index.css';

或

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

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

Answer 2

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

1. 安装css-modules-loader：https://github.com/gajus/react-css-modules
2. 将文件名styles.css更改为styles.module.css

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

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

4. 在组件中使用className：

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

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