d.ts文件未创建用于css-modules-loader的键入

Question

这是我的package.json文件：

{
  "name": "redacted",
  "version": "1.0.0",
  "description": "redacted",
  "main": "webpack.config.js",
  "directories": {
    "doc": "docs"
  },
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "redacted"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "URL"
  },
  "homepage": "Here",
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0"
  },
  "devDependencies": {
    "@types/react": "^16.3.16",
    "@types/react-dom": "^16.0.6",
    "awesome-typescript-loader": "^5.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^3.2.0",
    "source-map-loader": "^0.2.3",
    "tslint": "^5.10.0",
    "typescript": "^2.9.1",
    "typings-for-css-modules-loader": "^1.7.0",
    "webpack": "^4.11.1",
    "webpack-cli": "^3.0.2",
    "webpack-dev-server": "^3.1.4"
  }
}

这是webpack.config.js：

const path  = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    entry: "./src/index.tsx",
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "awesome-typescript-loader",
                exclude: /node_modules/,
            },
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
            },
            {
                test: /\.css$/,
                include: /src/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract('typings-for-css-modules-loader?modules&namedExport&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'),                              
            },
            {
                test: /\.css$/,
                include: /node_modules/,
                loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader?sourceMap'})
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('[name].css'),
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    devtool: "source-map",
    resolve: {
        extensions: [".js", ".ts", ".tsx"]
    }
}

在我的组件中执行以下操作：

import * as React from "react";
import css = require("./App.css");

export class App extends React.Component<{}, {}> {
    public render() {
        return (
            <div className={css.main}>I am working!</div>
        );
    }
}

但是它不会生成d.ts文件。 import css行说[ts] Cannot find module './App.css'。

相反，我收到此错误：

ERROR in ./src/components/App.css
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example

我也尝试过本教程，但是它也不起作用：https://medium.com/@sapegin/css-modules-with-typescript-and-webpack-6b221ebe5f10

我该如何解决这个问题？谢谢！