Webpack Laravel 5.5中的自定义网页包配置

我正在使用带有Webpack和Vuejs的Laravel5.5

我安装了一些软件包，如

foundationsites

和

bourbon

，在我的

app.scss

文件中，我包括了如下内容：

@import "bourbon";
@import 'foundation';

但该网页包无法解析这些包。我意识到我应该将

includePaths

选项添加到

sass加载器

中，但由于Laravel有自己的网页包装器，并提供了一个API来使用它（Laravel Mix）

Laravel Mix有一个名为

Mix.webpackConfig（）

的方法，该方法接收一个对象并将自定义设置与Laravel webpack设置合并

但不知怎的，我不能让它工作

下面是我在

webpack.mix.js中的工作：

const bourbonPaths = require("bourbon").includePaths;
const foundationPath = path.resolve(__dirname, 'node_modules/foundation-sites/scss');

mix.js('resources/assets/js/vScripts.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

mix.webpackConfig({
    module : {
        rules : [
            {
                test: /\.scss$/,
                use: ExtractPlugin.extract({
                    use : [
                        {
                            loader: 'sass-loader',
                            options : {
                                includePaths: [bourbonPaths[0],foundationPath ],
                            }
                        },
                    ]
                })
            },

        ]
    },
});

我应该删除
提取插件
并删除重复的
使用
：

mix.webpackConfig({
    module : {
        rules : [
            {
                test: /\.scss$/,
                use : [
                    {
                        loader: 'sass-loader',
                        options : {
                            includePaths: [bourbonPaths[0],foundationPath ],
                        }
                    },
                ]
            },
        ]
    },
});