无法使用Webpack加载Foundation 6的整个scss

Question

我尝试使用Webpack加载Foundation 6 scss。

这是我非常简单的main.scss文件：

@import '~foundation-sites/scss/foundation';

body {
  background-color: red;
}

以下是我app.js中的电话：

import './main.scss';  //webpack syntax

这是我的webpack.config.js：

var webpack = require("webpack");

module.exports = {

    context: __dirname + '/src',
    entry: './app/app.js',

    resolve: {
        root: [__dirname + "/src"],
        moduleDirectories: [__dirname + '/node_modules']
    },

    externals: {
        jQuery: 'jQuery',
        foundation: 'Foundation'
    },

    module: {
        loaders: [
            {
                test: /\.js$/, exclude: /node_modules/,
                query: {
                    presets: ['es2015']
                },
                loader: "babel"
            },
            {test: /\.scss$/, loader: 'style!css!sass!'},
            {test: /\.html$/, exclude: /node_modules/, loader: "raw"}

        ]
    },

    // support source maps
    devtool: "#inline-source-map"

};

运行webpack-dev-server --content-base src/后， 生成的index.html文件包含以下内容：

为什么仅基金会scss的初始评论？
可能是sass-loader的错误吗？

我无法加载整个Foundation的scss文件。