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()的方法，它接收一个Object并将自定义设置与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配置

1 个答案: