Laravel 5.4从Elixir升级到Webpack打破了多个SASS文件的js编译

Question

使用Laravel 5.2的Elixir我曾经能够将多个SASS文件编译成一个CSS文件，如下所示：

mix.sass([
        'app.scss',
        'controllers.scss'
    ], 'public/assets/css')

这不再适用。我现在得到这个错误：

mix.sass() is missing required parameter 1: src

检查函数的新版本，它确实需要一个字符串，不再知道如何处理数组。

我在Webpack上查阅了Laravel 5.4文档，关于将多个SASS文件编译成单个CSS文件的部分已被删除，所以我假设这个功能现在已经消失了。使用Webpack将多个SASS文件编译成单个CSS文件的最佳方法是什么？

Answer 1

你应该在master .scss文件中使用css的@import语句，然后告诉webpack这个文件。

例如，如果我有scss文件style.scss和controllers.scss，我可能会有以下app.scss文件：

// App Styles
@import "style";

// Controller Styles
@import "controllers";

然后我将它与webpack捆绑在一起，webpack.mix.js：

中包含以下内容

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

（Sourcemaps是可选的，但它们对于调试非常有用，因为它们使开发人员控制台能够告诉您源文件中的哪些代码行导致特定的css规则。没有它，开发控制台会告诉你一个来自app.css的行，您将会猜测原始代码的实际位置。）