Missing Webpack Loader Running Cypress test with React - reactjs

Question

I'm trying to use cypress for integration testing on a React project. However, I'm getting the following error:
Error: Webpack Compilation Error
./node_modules/react-pro-sidebar/dist/css/styles.css 1:0
Module parse failed: Unexpected character '#' (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
As the error suggests, I'm using the react-pro-sidebar package.
The first lines of the .css file of the package that is causing the error,
> #keyframes swing {
| 0%,
| 30%,
I've tried installing the css and scss webpack loader but it still failed.
Here's my webpack.config.js file,
const {resolve} = require('path');
module.exports = {
entry: [
'./md5.js'
],
output: {
path: resolve('./dist'),
filename: 'md5.min.js',
libraryTarget: "var",
library: "MD5"
}
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader'],
},
]
}
};
The code that triggers the error,
import React from 'react';
describe('example to-do app', () => {
beforeEach(() => {
cy.visit('http://localhost:3000')
})
it("containsMain",()=>{
cy.contains(".main")
})
})
The error also happens if I just try to load the page as well.