如何通过Laravel Mix合并SCSS为单CSS？含配置异常排查

Hey there! Let's break down your Laravel Mix questions and fix those issues step by step.

Laravel Mix makes this super straightforward—you don't need any extra tools for combining SCSS sources. The mix.sass() method natively accepts an array of input files, which it will compile and merge into a single output CSS file automatically.

Here's the correct configuration for your webpack.mix.js:

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

// Pass an array of SCSS files to compile and merge
mix.sass([
    'resources/sass/first-file.scss',
    'resources/sass/second-file.scss'
], 'public/css/combined-styles.css');

This does everything you need: it processes the SCSS (including variables, partials, etc.), combines the compiled output into one file, applies autoprefixing, and minifies the CSS automatically when you run npm run production.

Let's diagnose why your setup was causing issues:

• You tried using mix.combine() on raw SCSS files first, then passed that combined file to mix.sass(). But mix.combine() is designed for already compiled static assets (like plain CSS or JS), not preprocessor files like SCSS.
• The infinite loop happened because your combined SCSS file was saved in a directory that Laravel Mix watches by default (probably resources/sass). Every time mix.combine() updated the file, Mix detected the change and triggered a rebuild, which ran mix.combine() again—creating an endless cycle.

The Fix: Use the Native Multi-Input sass() Method #

The simplest and most reliable solution is to use the approach from question 1 above. It’s the intended way to handle multiple SCSS files in Mix, and it avoids the loop entirely.

If You Must Combine First (For Edge Cases) #

If you have a specific reason to merge the raw SCSS files before compiling (e.g., custom pre-processing), save the combined file to a directory that Mix doesn’t watch (like a temporary folder):

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

// Merge raw SCSS into a temp directory (outside of resources/sass)
mix.combine([
    'resources/sass/file1.scss',
    'resources/sass/file2.scss'
], path.resolve(__dirname, 'temp/combined.scss'));

// Compile the temp SCSS file to your public directory
mix.sass('temp/combined.scss', 'public/css/combined.css');

// Optional: Disable success notifications to avoid spamming during watch
mix.disableSuccessNotifications();

This way, the combined file isn’t in Mix’s watched resource directory, so it won’t trigger endless rebuilds.

内容的提问来源于stack exchange，提问作者Ilya Vo