как подключить модульный scss в react проект собранном на webpack?

Собрал react проект на webpack и настроил стили для обычных *.scss файлов. Все работало. Потом перешел на модульный scss, переименовал файлы на *.module.scss. Ниже мои настройки webpack:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',

  entry: './src/index.tsx',

  devServer: {
    open: true,
    port: 8080
  },

  module: {
    rules: [
      {
        test: /\.(ts|js|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader'
          },

          {
            loader: 'ts-loader'
          }
        ]
      },
  {
    test: /\.s[ac]ss$/,
    exclude: [/node_modules/, /.module/],
    use: ['style-loader', 'css-loader', 'sass-loader']
  },
  {
    test: /\.module\.s[ac]ss$/,
    exclude: /node_modules/,
    use: [
      'style-loader',
      { loader: 'css-loader', options: { importLoaders: 1, modules: true } },
      'sass-loader'
        ]
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
};

файл app.tsx, где я импортирую app.module.scss

import { Home } from '@/feature/ui';
import React from 'react';
import styles from './app.module.scss';

const App: React.FC = (): React.JSX.Element => {
  console.log(styles);
  return (
    <div className={styles.app}>
      <div className={styles.wrapper}>
        <div className={styles['hidden-block-1']}></div>
        <Home />
        <div className={styles['hidden-block-2']}></div>
      </div>
    </div>
  );
};

export default App;

И проблема в том что styles равно undefined. В консоли выводится сообщение об ошибке, что не может извлечь app из undefined. Помогите правильно настроить module scss