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值覆盖您要注入的内容。