Laravel Mix如何批量编译多个独立SCSS文件简化配置

Laravel Mix 原生的sass()方法不支持直接传入文件数组实现批量独立编译——如果直接给第一个参数传数组，底层webpack会默认把所有样式合并为单个CSS文件，不符合多文件独立输出的要求。你可以通过下面两种无额外依赖的方式实现配置简化，编译效果和逐行调用.sass()完全一致，每个SCSS会单独输出同名CSS文件，不会合并。

方案1：手动维护文件列表循环注册 #

把所有需要编译的SCSS路径整理为数组，通过循环逐个给Mix实例挂载编译规则，是最稳定、逻辑可控的写法：

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

// 统一维护需要独立编译的SCSS文件列表
const sassEntryList = [
    'resources/sass/file1.scss',
    'resources/sass/file2.scss',
    'resources/sass/file3.scss',
    'resources/sass/file4.scss',
    'resources/sass/file5.scss',
    'resources/sass/file6.scss',
    'resources/sass/file7.scss',
    'resources/sass/file8.scss',
    'resources/sass/file9.scss',
    'resources/sass/file10.scss'
];

// 先配置公共JS编译规则
mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/header.js', 'public/js');

// 批量注册SCSS编译规则，统一输出到public/css目录
sassEntryList.forEach(entry => mix.sass(entry, 'public/css'));

// 挂载全局公共配置
mix.sourceMaps();

后续新增需要独立编译的SCSS文件，只需要往sassEntryList数组里追加对应路径即可，不需要重复写链式调用。

方案2：自动扫描目录生成编译列表（零手动维护） #

如果不想每次新增SCSS都修改webpack.mix.js配置，可以借助Node.js内置的文件系统模块，自动扫描SCSS目录下的待编译文件，自动注册规则：

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

// SCSS文件存放根目录
const SASS_DIR = 'resources/sass';
// 扫描目录下所有scss文件，自动过滤Sass规范中下划线开头的公共片段文件（这类文件仅用于被其他文件引入，不需要单独编译）
const sassEntryList = fs.readdirSync(SASS_DIR)
    .filter(file => file.endsWith('.scss') && !file.startsWith('_'))
    .map(file => path.join(SASS_DIR, file));

// 公共JS配置
mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/header.js', 'public/js');

// 批量注册编译规则
sassEntryList.forEach(entry => mix.sass(entry, 'public/css'));

mix.sourceMaps();

注意：自动扫描逻辑默认只处理resources/sass根目录下的文件，如果你的SCSS文件存在多级子目录，需要额外写递归扫描逻辑匹配深层文件。

内容的提问来源于stack exchange，提问作者Lourd Nathaniel Gonzalez