Laravel Mix：一行编译所有SCSS文件

Question

我一直在研究Laravel项目，并且我的资源文件夹中有许多.SCSS文件。因此，通常我只会像这样写它们，

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/header.js', 'public/js')
    .sass('resources/sass/file1.scss', 'public/css')
    .sass('resources/sass/file2.scss', 'public/css')
    .sass('resources/sass/file3.scss', 'public/css')
    .sass('resources/sass/file4.scss', 'public/css')
    .sass('resources/sass/file5.scss', 'public/css')
    .sass('resources/sass/file6.scss', 'public/css')
    .sass('resources/sass/file7.scss', 'public/css')
    .sass('resources/sass/file8.scss', 'public/css')
    .sass('resources/sass/file9.scss', 'public/css')
    .sass('resources/sass/file10.scss', 'public/css')
    .sourceMaps();

有某种方法可以缩短它，而不是编码.sass（源，目的地），而是像源阵列一样将其写入，然后是目的地？在不将所有文件合并到一个CSS的情况下，因为当然，每个SASS文件都有自己的页面。喜欢.sass（[array_source]，目的地）？

Answer 1

2种方法：

第一方式：

制作一个名为app.scss内部的文件@import“ file.scss”包括所有文件。

然后.sass（'Resource/Sass/App.scss'，'public/css'）
但是，这将使所有文件成为一个文件。这可能不是您所追求的。

第二种方式：

const fs = require("fs");

fs.readdirSync("resources/scss/").forEach(fileName => 
    mix.scss(`resources/scss/${fileName}`, "public/css"));

这将使它们全部放在单个文件中。