Как настроить веб-пакет для использования загрузчика typings-for- css -modules

Question

Это мое лучшее предположение, но все равно не работает:

webpack-config. js

module.exports = {
    devtool: 'source-map',
    entry: "./app.tsx",
    mode: "development",
    output: {
        filename: "./app-bundle.js"
    },
    resolve: {
        extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx', '.css']
    },
    module: {
        rules: [
            {
                test: /\.tsx$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'ts-loader'
                }
            },
            {
                test: /\.css$/i,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'typings-for-css-modules-loader'
                }
            }
        ] 
    }

};

Когда я пытаюсь загрузить css файл из компонента, в котором происходит сбой. Вот мой код:

Реагирует нижний колонтитул компонента (например):

var React = require('react');
import styles from './styles.css';

завершается с ошибкой:

[tsl] ОШИБКА в .. \ src \ components \ Footer \ Footer.tsx (4,20) TS2307: Не удается найти модуль './styles.css'.

, но styles.css находится в той же папке, что и компонент.

Если я использую require, вот так:

const s = require('./styles.css');

пытается использовать загрузчик typings-for-css-modules, но:

ERROR in ./src/components/ Нижний колонтитул / styles. css Сборка модуля не удалась (из ./node_modules/typings-for-css-modules-loader/lib/index.js): Ошибка: не удается найти модуль 'css -loader'

Я здесь потерян. Согласно руководству typings-for- css -modules , я должен добавить это в webpack-config. js:

loaders: [
    { test: /\.css$/, loader: 'typings-for-css-modules-loader?modules' }
    { test: /\.scss$/, loader: 'typings-for-css-modules-loader?modules&sass' }
];

вместо использования правил. Но webpack не распознает свойство loaders и выдает мне:

Неверный объект конфигурации. Webpack был инициализирован с использованием объекта конфигурации, который не соответствует схеме API. - в конфигурации есть неизвестное свойство 'loaders'. Эти свойства действительны:

Вот мой пакет. json Файл:

{
  "name": "sitets",
  "version": "0.0.0",
  "description": "sitets",
  "main": "server.js",
  "author": {
    "name": ""
  },
  "scripts": {
    "buildts": "tsc --build",
    "clean": "tsc --build --clean",
    "build": "webpack-cli app.tsx --config webpack-config.js",
    "start": "node server"
  },
  "devDependencies": {
    "@types/node": "^8.0.14",
    "typescript": "^3.2.2",
    "typings-for-css-modules-loader": "^1.7.0"
  },
  "dependencies": {
    "express": "~4.16.4",
    "path": "~0.12.7",
    "react": "~16.6.0",
    "react-dom": "~16.6.0",
    "ts-loader": "~5.3.0",
    "typescript": "~3.1.5",
    "webpack": "~4.23.1",
    "webpack-cli": "~3.1.2"
  }
}