Непосредственно импортированный файл CSS из узловых модулей странным образом пропадает

Я столкнулся с очень своеобразной проблемой при попытке импортировать файл CSS из модуля узла.

В моем файле App.tsx у меня есть

import './App.css';                       // works
import '@foo/my-dependency/dist/foo.css'; // doesn't work

В то время как импорт локального файла CSS работает хорошо, импорт foo.css из модуля узла не работает вообще, но ошибки компиляции не наблюдается.

И если я изменю эту строку на синтаксис require, она будет работать нормально.

require('@foo/my-dependency/dist/foo.css'); // works

И если я изменю его на модуль CSS, такой как синтаксис, он тоже сработает.

import style from '@foo/my-dependency/dist/foo.css'; // works
console.log(style);     // to ensure the imported stuff is used at least once

Обратите внимание, что для поддержки выше мне нужно добавить объявление типа модуля CSS, как указано здесь.

Я не уверен, где именно это происходит не так. Моя конфигурация Webpack для правил модуля выглядит так, как показано ниже. И я использую сервер разработки webpack для тестирования. Версия веб-пакета 5.23.0.

  module: {
    rules: [
      {
        test: /\.(jsx?|tsx?)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.s?css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      }
    ],
  },