Laravel 混合一个 sass 到多个 css

Question

尝试此操作时：

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css/app_blue.css', {
        data: '$theme-bg-primary: #1450d9;'
    })
    .sass('resources/sass/app.scss', 'public/css/app_red.css', {
        data: '$theme-bg-primary: #ba0000;'
    });

npm 的输出是 should not contain the item '[...]/app.scss' twice.

如何从一个来源输出 2 个不同的 css 作为 app.scss？

Answer 1

因为您对两个 css 文件使用了不同的变量值。您必须调用 .sass 两次，但为了进一步优化它，我建议您使用变量。

例如

const cssSourceDir = 'resources/sass/';
const cssPublicDir = 'public/css/';
const commonSassFile = `${cssSourceDir}/app.scss`;

可以像这样去除重复

mix.js('resources/js/app.js', 'public/js')
.sass(commonSassFile, cssPublicDir+'/app_blue.css', {
    data: '$theme-bg-primary: #1450d9;'
})
.sass(commonSassFile, cssPublicDir+'/app_red.css', {
    data: '$theme-bg-primary: #ba0000;'
});

Answer 2

您需要为每个正在创建的主题创建一个存根 scss 文件，而不是将您的数据注入混合调用。

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app_red.scss', 'public/css')
   .sass('resources/assets/sass/app_blue.scss', 'public/css')

那些 scss 文件包含基础 app.scss 并覆盖您正在注入的 data 值。

Laravel 混合一个 sass 到多个 css

Laravel Mix one sass to multiple css

laravel

webpack

laravel-mix