How to resolve @import with Webpack3

Question

I'm trying to add semantic-ui-css to my React application. But, I'm receiving this error message:

"Invalid or unexpected token".

The traceback indicates an issue parsing the @import. Any thoughts or suggestions would be greatly appreciated.

Also, I realize many other people have had this problem, but haven't found a solution on Stack that works yet. Full source is available here: https://github.com/lgants/django-react-ssr.

frontend/webpack.client.base.config.js

var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/client/index.js',
  output: {
    filename: '[name]-[hash].js',
    publicPath: '/static/js/',
    path: path.resolve(__dirname, '../backend/app/static/js/')
  },
  // tells webpack to run babel on every file it runs through
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: [
            'react',
            'stage-0',
            ['env', { targets: { browsers: ['last 2 versions'] } }]
          ]
        }
      },
      {
        test: /\.(png|gif)$/,
        loader: 'url-loader?limit=1024&name=[name]-[hash:8].[ext]!image-webpack-loader'
      },
      {
        test: /\.jpg$/,
        loader: 'file-loader'
      },
      {
       test: /\.css$/,
       use: [
         'style-loader',
         'css-loader'
       ]
      },
      {
        test: /\.(sass|scss)$/,
        loader: ExtractTextPlugin.extract({ use: 'style-loader!css-loader!sass-loader' })
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.(ttf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader'
      }
    ]
  },
  plugins: [
    new BundleTracker(
      {
        filename: './webpack-stats.client.json'
      }
    ),
    new CleanWebpackPlugin([
      'backend/app/static/js/main-*.*', 'backend/app/static/js/*.hot-update.*'
    ],
      {
        dry: false,
        root: path.resolve(__dirname, '..'),
        watch: true
      }
    )
  ]
};

frontend/webpack.client.dev.config.js

var path = require('path');
var merge = require('webpack-merge');
var webpack = require('webpack');
var baseConfig = require('./webpack.client.base.config.js');
var CleanWebpackPlugin = require('clean-webpack-plugin');

const config = {
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ]
};

module.exports = merge(baseConfig, config);