Webpack not recognising css loader

I've just started developing a system using asp.net MVC and react. While trying to integrate CSS (specifically for the react-table package styling, 'react-table/react-table.css'), webpack is refusing to compile it.

I've tried adding css-loader, style-loader, Mini-CSS-Extract-Plugin and an array of other rules but to no avail. I think I've looked at just about every relevant post here but no progress. I've also tried using a very basic css file to see if it was react-table. Whatever I try I get the error:

"Uncaught Error: 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."

Here's the current webpack.config.js:

"use strict";

var path = require("path");
var WebpackNotifierPlugin = require("webpack-notifier");
var BrowserSyncPlugin = require("browser-sync-webpack-plugin");

module.exports = {
    entry: "./Scripts/Home/react/index.js",
    output: {
        path: path.resolve(__dirname, "./Scripts/dist/Home/react"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ['style-loader', 'css-loader?modules=true&camelCase=true'],
            },
            {
                test: /\.css$/,
                include: /node_modules/,
                loaders: ['style-loader', 'css-loader?modules=true&camelCase=true'],
            }

        ]
    },
    devtool: "inline-source-map",
    plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin()]
};

And my package.json

    {
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack"
  },
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "browser-sync": "^2.26.7",
    "browser-sync-webpack-plugin": "^2.2.2",
    "css-loader": "^3.0.0",
    "webpack": "^4.35.2",
    "webpack-cli": "^3.3.5",
    "webpack-notifier": "^1.8.0"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "lodash": "^4.17.11",
    "mini-css-extract-plugin": "^0.7.0",
    "namor": "^1.1.2",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.9",
    "react-dom": "^16.8.6",
    "react-table": "^6.10.0",
    "style-loader": "^0.23.1",
    "styled-components": "^4.3.2"
  }
}

I was under the impression that it was as simple as adding the css-loader & style-loader to produce the desired result but unfortunately I've had no luck

Thanks in advance for any support!