Custom Webpack config in Laravel 5.5

Question

I'm using Laravel 5.5 with Webpack and Vuejs.

I installed some packages like foundation-sites and bourbon and in my app.scss file I included them like so :

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

But the webpack can't resolve the packages. I realize that I should add the includePaths option to sass-loader but since Laravel has it's own wrapper for the webpack and provides an API to work with it (Laravel Mix).

The Laravel Mix has a method called mix.webpackConfig() which receives an Object and merge the custom setting with the laravel webpack settings.

But somehow I can't make it work.

Here's my effort in 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 ],
                            }
                        },
                    ]
                })
            },

        ]
    },
});

Answer 1

I should have removed the ExtractPlugin and remove the duplicated use:

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