Laravel 5.5中的自定义WebPack配置

Question

我正在使用webpack和vuejs的laravel 5.5。

我安装了一些诸如foundation-sites和bourbon的软件包，在我的app.scss文件中，我像这样包含了它们：

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

但是WebPack无法解析软件包。我意识到我应该将includePaths选项添加到sass-loader中，但是由于Laravel有自己的WebPack包装器，并提供了与之合作的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 ],
                            }
                        },
                    ]
                })
            },
        ]
    },
});

Answer 1

我应该删除ExtractPlugin并删除重复的use：

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