css - 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 的行，您将只能猜测原始代码的实际位置。)