Laravel Mix如何从单个app.scss生成两个独立CSS且去重复显示

首先，你遇到的重复显示app.scss条目问题，核心原因是连续两次调用.sass()方法都指向了同一个源文件resources/sass/app.scss——Laravel Mix会把这当成两个独立的编译任务，所以日志里会重复输出该文件的处理记录。

下面是两种优雅的解决方案，既可以生成独立的主题CSS文件，又能彻底避免重复日志：

方案1：拆分主题文件（推荐，更易维护） #

这种方法将基础样式和主题变量分离，逻辑更清晰，也能从根本上解决重复日志问题：

1. 重构SCSS文件结构

   • 将原来app.scss中的核心样式（不含主题变量）移到新的resources/sass/_base.scss文件中（下划线表示这是一个局部文件，不会被单独编译）。
   • 创建两个主题入口文件：
     • resources/sass/theme-blue.scss：

       $theme-bg-primary: #1450d9;
       @import 'base';
       

     • resources/sass/theme-red.scss：

       $theme-bg-primary: #ba0000;
       @import 'base';
       

2. 更新webpack.mix.js配置
   现在编译两个不同的主题入口文件，就不会出现重复日志了：

   mix.js('resources/js/app.js', 'public/js')
      .sass('resources/sass/theme-blue.scss', 'public/css/app_blue.css')
      .sass('resources/sass/theme-red.scss', 'public/css/app_red.css');
   

方案2：不拆分文件，使用Webpack多编译实例（适合不想动原有文件的场景） #

如果你希望保留原有的app.scss文件，可以通过自定义Webpack配置来实现多主题编译，同时避免重复日志：

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

// 基础配置
mix.js('resources/js/app.js', 'public/js');

// 定义主题配置数组
const themes = [
  { output: 'app_blue.css', primaryColor: '#1450d9' },
  { output: 'app_red.css', primaryColor: '#ba0000' }
];

// 遍历主题，创建独立的编译实例
themes.forEach(theme => {
  mix.sass('resources/sass/app.scss', `public/css/${theme.output}`, {
    additionalData: `$theme-bg-primary: ${theme.primaryColor};`
  })
  // 关键：给每个任务添加唯一的名称，避免日志重复
  .webpackConfig({
    name: theme.output.replace('.css', '')
  });
});

这里通过webpackConfig给每个编译任务设置唯一名称，Mix就会区分不同的任务，日志里不会再重复显示app.scss的条目。

两种方案都能实现你的需求，方案1更符合CSS模块化的最佳实践，后续维护主题变量也更方便。

内容的提问来源于stack exchange，提问作者Patrick L.