javascript - 无法使用 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文件包含以下内容：

为什么只有Foundation的scss的初步评论？
可能是一个错误sass-loader？

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