Why does this webpack css-loader style-loader config still fail to interpret inline css import

I need to import .css files inline from within my Server-Side rendered React application. I have configured my Webpack file to use what I believe are the appropriate loaders, however I am still receiving the following SyntaxError:

~/.../node_modules/rc-slider/assets/index.css:1
(function (exports, require, module, __filename, __dirname) { .rc-slider {
                                                              ^

SyntaxError: Unexpected token .
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.rc-slider/assets/index.css (/Users/roberthunter/DEV/AMNE/website-6.0/build/webpack:/external "rc-slider/assets/index.css":1:1)

I have consulted several guides including Webpack's configuration for MiniCssExtractPlugin

https://webpack.js.org/plugins/mini-css-extract-plugin/#root

The following SO question seems to address my problem, but the solution does not work for me.

Webpack css-loader is not importing CSS

I also referenced the following to get an understanding of how css-loader and style-loader actually operate

Webpack style-loader vs css-loader

I have tried many variations of the above including importing the css with loaders inline. Ex:

import SliderCSS from 'style-loader!css-loader!rc-slider/assets/index.css';

Here are my following relevant pieces of code.

webpack.confing.js (For client-side app)

// ...imports above

module.exports = {
  mode: dev ? "development" : "production",
  // context: path.join(__dirname, "src"),
  devtool: !dev ? "none" : "source-map",
  entry: {
    vendor: ["styled-components"],
    webflow: ["./src/app/webflow.js"],
    app: ["@babel/polyfill/noConflict", "./src/app/react.js"],
    wscripts: ["@babel/polyfill/noConflict", "./src/webflow-scripts/index.js"],
  },
  resolve: {
    modules: [
      path.resolve("./"),
      "node_modules",
    ],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          }
        }
      },
      {
        // Do not transform vendor's CSS with CSS-modules
        // The point is that they remain in global scope.
        // Since we require these CSS files in our JS or CSS files,
        // they will be a part of our compilation either way.
        // So, no need for ExtractTextPlugin here.
        test: /\.css$/,
        include: /node_modules/,
        use: [
          MiniCSSExtractPugin.loader,
          // 'style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|vtt)$/,
        loader: 'file-loader',
      },
      {
        test: /\.(jpg|png|gif)$/,
        loaders: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            query: {
              progressive: true,
              optimizationLevel: 7,
              interlaced: false,
              pngquant: {
                quality: '65-90',
                speed: 4,
              },
            },
          },
        ],
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        test: /\.json$/,
        loader: 'json-loader',
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
  },
  plugins: [
    new MiniCSSExtractPugin(),
    new webpack.ProvidePlugin({
      "React": "react"
    }),
    new webpack.DefinePlugin({
      'process.env.IS_BROWSER_SIDE': JSON.stringify(true),  // Used to determine if code is rendering on the client or the server.
      'process.env.NODE_ENV': JSON.stringify(true),  // Used to determine if code is rendering on the client or the server.
    }),
  ]
};

webpack.server.config.js (For webpacking server)

// ...imports above

module.exports = {
  mode: dev ? "development" : "production",
  // context: path.join(__dirname, "src"),
  devtool: !dev ? "none" : "source-map",
  entry: {
    server: ["@babel/polyfill/noConflict", "./src/server/server.js"],
  },
  resolve: {
    modules: [
      path.resolve("./"),
      "node_modules",
    ],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          }
        }
      },
      {
        // Do not transform vendor's CSS with CSS-modules
        // The point is that they remain in global scope.
        // Since we require these CSS files in our JS or CSS files,
        // they will be a part of our compilation either way.
        // So, no need for ExtractTextPlugin here.
        test: /\.css$/,
        include: /node_modules/,
        use: [
          MiniCSSExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
        test: /\.scss$/,
        use: [MiniCSSExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|vtt)$/,
        loader: 'file-loader',
      },
      {
        test: /\.(jpg|png|gif)$/,
        loaders: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            query: {
              progressive: true,
              optimizationLevel: 7,
              interlaced: false,
              pngquant: {
                quality: '65-90',
                speed: 4,
              },
            },
          },
        ],
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        test: /\.json$/,
        loader: 'json-loader',
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "[name].bundle.js",
  },
  plugins: [
    new WebpackSourceMapSupport(),
    new webpack.ProvidePlugin({
      "React": "react"
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(true),  // Used to determine if code is rendering on the client or the server.
    }),
    new MiniCSSExtractPlugin(),
  ],
  target: 'node',
  node: {
    __dirname: false,
  },
  externals: [nodeExternals()],
};

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "babel-plugin-styled-components",
    ["css-modules-transform", {
      "extensions": [".css"],
      "keepImport": true,
    }],
  ],
}

package.json (scripts)

  "scripts": {
    "build:dev": "webpack --config webpack.config.js --progress --watch",
    "build:server:dev": "webpack --config webpack.server.config.js --progress --watch",
    "start": "npm-run-all --parallel build:dev build:server:dev server:dev-webpack",
    "server:dev-webpack": "nodemon build/server.bundle.js",

With my current setup, I am expecting the .css modules I am importing to be parsed and added to a /dist directory along with my other webpacked assets so that they can be served properly by the express server, whose code is webpacked into the /build directory. However, adding the a line within my app to import '.../../some.css raises this syntax error.

Also, I am aware that there are boilerplates out there that simplify rendering react server-side. I tried Next.js however it was too opinionated to meet my needs (serving statically generated html from a 3rd party web builder). I not completely new to webpack, however I do not have a strong grasp on its inner workings so any additional guidance, help or suggestions are greatly appreciated.