Проект преобразован из веб-пакета 1 в 3 - сборка не работает?

Question

Наткнулся на этот проект от Google, который я хотел попробовать запустить локально. Настроить webpack-dev-server и переехал webpack от 1.x до 3.x, чтобы запустить его. Я довольно новичок в настройке веб-пакета, но понял, что произошли некоторые критические изменения с 1.x до 3.x, и я думаю, что смог разобраться.

Запустив dev-сервер, я заметил, что некоторые важные стили отсутствуют. Стили присутствуют в head при проверке с помощью инструментов dev, но по какой-то причине они не применяются к элементам. Если я закомментирую sass-переменные и удалим вложение, оно будет работать так, как должно.

Мне любопытно, что я сделал неправильно и что мне нужно сделать, чтобы синтаксис sass работал в проекте. Мне кажется, что pre-css не делает то, что должен, но я не получаю сообщений об ошибках.

Вот webpack.config.js (для справки, вот версия 1.x)

var webpack = require('webpack');

var PROD = process.argv.indexOf('-p') !== -1

var precss = require('precss');
var calc = require("postcss-calc")
var autoprefixer = require('autoprefixer');

module.exports = {
    'context': __dirname,
    entry: {
        'Main': './src/FeatureTest',
    },
    output: {
        filename: './build/[name].js',
        chunkFilename: './build/[id].js',
        sourceMapFilename : '[file].map',
    },
    resolve: {
        modules : ['../third-party/Tone.js/', 'node_modules/tone', 'node_modules', 'src', 'third_party'],
    },
    plugins: PROD ? [
        new webpack.optimize.UglifyJsPlugin({minimize: true}),
      ] : [],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
              {
                loader: 'style-loader' // Adds CSS to the DOM by injecting a <style> tag
              },
              {
                loader: 'css-loader' //  interprets @import and url() like import/require() and will resolve them.
              },
              {
                loader: 'postcss-loader', // postcss loader so we can use autoprefixer
                options: {
                  postcss: [
                    precss(),
                    autoprefixer({
                      browsers: [
                        'last 3 version',
                        'ie >= 10',
                      ],
                    }),
                    calc(),
                  ],
                },
              },
            ],
      },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|Tone\.js)/,
                loader: 'babel-loader', // 'babel-loader' is also a legal name to reference
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.(png|gif|jpg|svg)$/,
                loader: 'url-loader',
            },
            {
                test   : /\.(ttf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
                loader : 'file-loader?name=images/font/[hash].[ext]'
                // loader : 'file-loader'
            }
        ]
    },
    /*postcss: function () {
        return [precss, autoprefixer, calc];
    },*/
    devtool: PROD ? '' : '#eval-source-map'
};

А вот и мой package.json

{
  "name": "giorgio-cam",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "start": "webpack-dev-server"
  },
  "author": "Yotam Mann",
  "dependencies": {
    "autoprefixer": "^6.3.7",
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "css-loader": "^0.23.1",
    "domready": "^1.0.8",
    "exports-loader": "^0.6.3",
    "file-loader": "^0.9.0",
    "is-mobile": "^0.2.2",
    "knuth-shuffle": "^1.0.1",
    "postcss-calc": "^5.3.0",
    "postcss-loader": "^0.9.1",
    "precss": "^1.4.0",
    "screenfull": "^3.0.2",
    "startaudiocontext": "^1.2.0",
    "style-loader": "^0.13.1",
    "three": "^0.81.0",
    "tone": "^0.8.0",
    "tween.js": "^16.3.5",
    "url-loader": "^0.5.7",
    "visibilityjs": "^1.2.4",
    "webpack": "3.8.1",
    "webrtc-adapter": "^2.0.3",
    "youtube-iframe": "^1.0.3"
  },
  "devDependencies": {
    "node-sass": "^4.6.0",
    "postcss": "^6.0.14",
    "postcss-scss": "^1.0.2",
    "precss": "^1.4.0",
    "sass-loader": "^6.0.6",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  }
}