Ошибка компиляции Webpack при последующих сборках

Question

Мое приложение хорошо в первый раз. Но когда я меняю исходный код JavaScript или файл scss (при использовании webpack-dev-server) и зверь перекомпилируется, я получаю странную ошибку от sass-загрузчика, я думаю:

ERROR in ./src/DetailView/styles.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!.
(I shortend the output, because that sequence is much longer in reality ...)

Последняя часть ошибки показывает:

[...continuing]loader.js!./src/DetailView/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import '../../assets/styles/sizes';
^
      Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"
      in /Users/edgar/projects/web/wiwi/src/DetailView/styles.scss (line 1, column 1)
 @ ./src/DetailView/styles.scss 2:14-10124 21:1-42:3 22:19-10129
 @ ./src/DetailView/index.jsx
 @ ./src/App.jsx
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.jsx

Исходный файл src/DetailView/styles.scss выглядит так:

@import '../../assets/styles/sizes';

#detail-view {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.9);
  padding: $defaultPadding;
}

Мой конфиг веб-пакета выглядит следующим образом (я немного разбил вещи, потому что не хотел, чтобы CSS помещался в отдельные файлы в режиме dev):

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const pathsToClean = [
  'dist'
];

const cleanOptions = {
  // root:     '/full/webpack/root/path',
  // exclude:  [ 'shared.js' ],
  verbose: true,
  dry: false
};

const config = {
  entry: {
    main: './src/index.jsx',
    global: './src/global.jsx'
  },

  devServer: {
    inline: true,
    hot: true
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },

  devtool: 'inline-source-map',

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: [ 'babel-loader', 'eslint-loader' ]
      },
      {
        test: /\.svg$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: [ 'url-loader' ]
      }
    ]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(pathsToClean, cleanOptions), new HtmlWebpackPlugin({
      template: 'assets/index.html',
      chunksSortMode: 'manual',
      chunks: [ 'global', 'main' ],
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new CopyWebpackPlugin([
      { from: 'assets/img', to: 'img/' },
      { from: 'assets/font', to: 'font/' },
    ])
  ],

  resolve: {
    alias: {
      styles: path.resolve(__dirname, 'assets', 'styles'),
      img: path.resolve(__dirname, 'assets', 'img')
    },
    extensions: [ '.js', '.jsx' ],
    modules: [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'node_modules')
    ]
  }
};

module.exports = (env, args) => {
  if (env == 'production') {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
        },
        'css-loader'
      ]
    });
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
        },
        'css-loader',
        'sass-loader'
      ]
    });
  } else {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    });
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    });
  }
  return config;
};

Styles.scss импортируется index.jsx DetailView Составная часть.

Проблема никогда не возникала раньше.

Я только что создал этот новый компонент DetailView в этом приложении React. Все остальные компоненты соблюдают то же соглашение: находясь в отдельной папке, содержащей index.jsx, импортируя ОДИН styles.scss и экспортируя один Pure Component или один Pure Component и компонент, сгенерированный connect() вне react-redux пакет.