Custom sass to multisite project

I have 3 websites in one Laravel project:

https://regalaunpuzzle.es/

https://calendariospersonalizados.es/

https://fotolienzo.com/

The 3 webs share the same sass files compiled with webpack and laravel mix.

How can I use custom sass for each domain?

For example, the two corporate colors of the websites are indicated in the variables.scss file:

$brand_color_primary
$brand_color_secondary

I want two different colors in each domain.

What would be the best way to do this?

This is my app.scss, this contains de variables.scss file:

// Variables
@import 'variables_env';
@import 'variables';

// External 
@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-pro/scss/fontawesome';
@import '~@fortawesome/fontawesome-pro/scss/light';
@import '~@fortawesome/fontawesome-pro/scss/regular';
@import '~@fortawesome/fontawesome-pro/scss/solid';
@import '~@fortawesome/fontawesome-pro/scss/brands';
@import '~slick-carousel/slick/slick.css';

// Base
@import 'base/global';
@import 'base/typography';
@import 'base/backgrounds';
@import 'base/text-colors';
@import 'base/shadows';
@import 'base/helpers';

// Components
@import 'components/promotion-bar';
@import 'components/buttons';
@import 'components/action-bar-mobile';
@import 'components/breadcrumbs';
@import 'components/cookies';
@import 'components/tables';
@import 'components/forms';
@import 'components/separators';
@import 'components/stars-rating';
@import 'components/lists';
@import 'components/input-selector-box';
@import 'components/vue-tabs';
@import 'components/product-box';
@import 'components/product-box-category';
@import 'components/slick-carousel';
@import 'components/selector-product-list';
@import 'components/section';
@import 'components/testimonial';
@import 'components/pickpoint-info';
@import 'components/product-filter';
@import 'components/thematic-products-row';
@import 'components/navbar-accounts';

// Vendors
@import 'vendors/jqueryfancybox3/jquery.fancybox';

// Layout
@import 'layout/main-header';
@import 'layout/horizontal-megamenu';
@import 'layout/mobile-sidebar-megamenu';
@import 'layout/main-footer';
@import 'layout/admin';


// Pages
@import 'pages/index';
@import 'pages/product-page';
@import 'pages/products-list';
@import 'pages/cart';
@import 'pages/docs';
@import 'pages/offers';
@import 'pages/faq';

via Chebli Mohamed