React项目无法导入CSS文件的问题求助

大家好，我现在碰到一个头疼的问题——没法把CSS文件导入到JSX文件里，麻烦帮忙看看哪里出问题了😭

我在JSX文件里的导入代码如下，最后一行导入CSS的地方会报错：

import React from 'react';
import FormControl from '@material-ui/core/FormControl';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import Button from '@material-ui/core/Button';
import { Icon } from '@twilio/flex-ui';
import { makeInternalCall } from './index';
import '../../styling/theme1.css'; // 此处抛出错误

我已经在终端执行了下面的命令，安装了相关依赖：

npm install style-loader css-loader --save-dev

我的webpack.config.js配置是这样的：

module.exports = (config, { isProd, isDev, isTest }) => {
  /**
   * Customize the webpack by modifying the config object.
   * Consult https://webpack.js.org/configuration for more information
   */
  config.module.rules.push({
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
  });
  return config;
}

对应的Theme1.css内容：

.root {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
}

.main {
  margin: 0;
  padding: 0;
}

.formControl {
  width: 250px;
}

.boxDialpad {
  border-top: 1px solid #eeeeee;
}

.titleAgentDialpad {
  width: 100%;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  font-size: inherit;
}

.subtitleDialpad {
  text-transform: uppercase;
}

.buttonAgentDialpad {
  display: flex;
  justify-content: center;
}

.dialPadBtn {
  border-radius: 100px;
  min-width: 0px;
}

现在一运行项目就会报错，有没有大佬能帮我排查下问题出在哪呀？

备注：内容来源于stack exchange，提问作者Nui