Laravel 5.5 中的自定义 Webpack 配置

Question

我正在使用 Laravel 5.5 与 Webpack 和 Vuejs。

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

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

但是webpack 无法解析包。我意识到我应该将 includePaths 选项添加到 sass-loader 但是因为 Laravel 有它自己的 webpack 包装器并提供了一个 API 来使用它（Laravel混合）。

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 ],
                        }
                    },
                ]
            },
        ]
    },
});

Laravel 5.5 中的自定义 Webpack 配置

Custom Webpack config in Laravel 5.5

webpack

zurb-foundation

laravel-5.5

bourbon