How to resolve #import with Webpack3 - css

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);