benmcm1994's avatar

Compiling multiple Scss files to multiple Css outputs

I'm currently developing a site with white labeling functionality and need multiple CSS files in order to select the styling for each white label. The problem is that Laravel Mix is only spitting out 1 app.css file and not the others.

I've tried

    .sass('resources/sass/app.scss', 'dist/css')
    .sass('resources/sass/blue.scss', 'dist/css')
    .sass('resources/sass/orange.scss', 'dist/css')

But this does not work as of last year I believe. Is there a way to currently do this? I tried to install the previous version of Mix when this worked but I encounter errors with the old version.

0 likes
5 replies
benmcm1994's avatar

@BOBBYBOUWMANN - Hi Bobby, as I said in the post I tried this but it does not work. The files are generated but they are empty. Only the first, App.scss is compiled successfully.

bobbybouwmann's avatar

They are all writing to the same app.css file. Instead you need to be specific about where you want it to be generated

mix.sass('resources/sass/app.scss', 'public/css')
   .sass('resources/sass/app2.scss', 'public/css');

It works fine for me!

$ ls -la public/css
-rw-r--r--   1 user  staff  415691 Feb 26 14:00 app.css
-rw-r--r--   1 user  staff  415691 Feb 26 14:00 app2.css

Note that is only works with the newest version of Laravel mix that ships with Laravel 5.7!

benmcm1994's avatar

@BOBBYBOUWMANN - Yeah, I got it working. For some reason thought I could spit out my css and then override one variable and it would override the variable everywhere in the sheet. In the end I figured I just needed to spit out the same sheet with the variable being a different colour in each sheet. It works as intended now :)

bobbybouwmann's avatar

Aah great! Glad you got it working ;) Might be useful to others as well :D

1 like

Please or to participate in this conversation.