如何使用Webpack3解析@import

Question

我正在尝试将semantic-ui-css添加到我的React应用程序中。但是，我收到此错误消息：

  

＆＃34;无效或意外的令牌＆＃34;。

回溯表示解析@import时出现问题。任何想法或建议将不胜感激。

另外，我意识到很多其他人都有这个问题，但是还没有找到Stack上的解决方案。完整资源来源：https://github.com/lgants/django-react-ssr。

前端/ 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
      }
    )
  ]
};

前端/ 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);