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

你应该在主 .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();

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

Laravel 5.4 upgrade from Elixir to Webpack breaks js compilation with multiple SASS files