Как я могу импортировать модули CSS в файл TypeScript?

Я внес некоторые изменения, которые перечислены ниже.

Я работаю с комбинацией React (18.2.0), Typescript (4.8.4) и Webpack (5.75.0). Я пытаюсь добавить стиль в свое приложение и пытаюсь использовать модули CSS. Я пробовал несколько конфигураций Webpack, и ни одна из них не заставляет Webpack использовать правильный загрузчик. Я пробовал несколько других вариантов загрузчиков (как видно из закомментированных разделов), и ни один из них не работает.

Я использую подход, аналогичный этому ответу для импорта таблиц стилей (объявление src/Globals.d.ts, установка плагина компилятора typescript-plugin-css-modules для tsc и импорт как import * as styles from './styles.module.css')

Импорт таблицы стилей

import * as styles from './ResultCount.module.css'

export const ResultCount = () => {
  const orders = useSelector((state: ReducedState) => state.all.orders)
  console.info('result count style name', styles.results) // always undefined

  return <p className = {styles.results}>

src/Globals.d.ts

declare module '*.module.css'

Это ошибка, которую я получаю независимо от используемой конфигурации загрузчика.

cached modules 1.59 MiB (javascript) 27.4 KiB (runtime) [cached] 131 modules
./src/components/Order/styles.module.css 96 bytes [built] [1 error]

ERROR in ./src/components/Order/styles.module.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .order {
...

Может ли кто-нибудь сказать мне, что я делаю неправильно в моем файле webpack.config.ts?

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        options: {
          transpileOnly: true
        },
        exclude: /dist/
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: "[name]_[local]_[hash:base64]",
              sourceMap: true,
              minimize: true
            }
          }
        ]
      },
      // {
      //   test: /\.css$/,
      //   include: path.join(__dirname, 'src/components'),
      //   loader: 'css-loader',
      //   //use: ['style-loader', 'css-loader']
      //   // use: [
      //   //   'style-loader',
      //   //   {
      //   //     loader: 'typings-for-css-modules-loader',
      //   //     options: {
      //   //       modules: true,
      //   //       namedExport: true
      //   //     },
      //   //   },
      //   //   'css-loader',
      //   // ],
      // },
    ]
  },

Редактировать

Я обнаружил, что сервер веб-пакетов должен быть перезапущен, чтобы такие изменения вступили в силу (даже при включенной перезагрузке). Новая проблема заключается в следующем: хотя Webpack успешно строится, но любой импорт классов в файлах .ts возвращает undefined. Таким образом, ни один из стилей не применяется. Я обновил заголовок, чтобы отразить новую проблему.

Странно то, что мой языковой сервер (tsserver) может автоматически завершать классы, определенные в файле .css, из import * as styles from './styles.module.css', но если я использую console.info() перед тем, как вернуть свой TSX, я всегда вижу неопределенное значение. Я убедился, что искаженные имена модулей CSS находятся на окончательно отображаемой странице, найдя встроенные стили в инспекторе браузера. Я также попытался объявить файл styles.module.css.d.ts (хотя мне это не нужно из-за плагина Typescript) на всякий случай, но это все равно не решило проблему. Я также пытался (из этого ответа) переименовать из styles.module.css в <component name here>.module.css, но это тоже не сработало.

Кто-нибудь знает, что может быть причиной этого?