Неправильный или неожиданный токен, загружающий файл css с помощью веб-пакета в реактивном проекте

Question

У меня есть реактивный проект, в котором используются стилизованные компоненты, и я пытаюсь включить файл CSS как часть act-image-gallery

Я выполнил шаги для включения css-loader и style-loader в мой проект и попытался импортировать файл, подобный этому

import 'react-image-gallery/styles/css/image-gallery.css

и включает следующее в правилах конфигурации Webpack

{
  test: /\.css$/i,
  use: ['style-loader', 'css-loader'],
}

При запуске сервера я получаю сообщение об ошибке ниже

SyntaxError: Invalid or unexpected token

(function (exports, require, module, __filename, __dirname) { @charset "UTF-8";

в вышеуказанном файле CSS

Из некоторых поисковиков я понял, что это потому, что файл CSS включен в качестве файла JS в Webpack. Но разве так не должно быть?

Дополнительная информация: у меня есть приложение на стороне сервера.

Что я делаю не так?

Обновление:

Мои правила выглядят так

Файл rules.ts

import webpack from 'webpack'

const ts: webpack.RuleSetRule = {
  test: /^(?!.*\.spec\.tsx?$).*\.tsx?$/,
  exclude: /node_modules/,
  use: ['babel-loader'],
}

const img: webpack.RuleSetRule = {
  test: /\.(png|jpe?g|gif|svg)$/,
  use: 'file-loader',
}

const css: webpack.RuleSetRule = {
  test: /\.css$/i,
  use: ['style-loader', 'css-loader'],
}

export default {
  client: {
    ts,
    img,
    css,
  },
  server: {
    ts,
    css,
    img: { ...img, use: [{ loader: 'file-loader', options: { emitFile: false } }] },
  },
}

Файл конфигурации со следующим

const config: webpack.Configuration = {
  context: path.join(__dirname, '../../src/client'),
  resolve: {
    ...resolve.client,
    alias: { 'react-dom': '@hot-loader/react-dom' },
  },
  devtool: false,
  entry: {
    main: ['./index.tsx'],
  },
  mode: 'development',
  module: {
    rules: [rules.client.ts, rules.client.img, rules.client.css],
  },
  output: output.client,
  plugins: [
    ...plugins,
    ...developmentPlugins,
    new ForkTsCheckerWebpackPlugin({
      tsconfig: path.join(__dirname, '../../tsconfig.fork-ts-checker-webpack.plugin.json'),
    }),
    new CleanWebpackPlugin({
      cleanAfterEveryBuildPatterns: ['!webpack.partial.html', '!favicon.ico'],
    }),
  ],
}