Блог

У меня есть 3 веб-сайта в одном проекте Laravel:

https://regalaunpuzzle.es/

https://calendariospersonalizados.es/

https://fotolienzo.com/

3 веб-интерфейса используют одни и те же файлы sass, скомпилированные с помощью webpack и laravel mix.

Как я могу использовать пользовательский sass для каждого домена?

Например, два корпоративных цвета веб-сайтов указаны в файле variables.scss:

 $brand_color_primary
$brand_color_secondary
  

Я хочу два разных цвета в каждом домене.

Какой был бы лучший способ сделать это?

Это мое приложение.scss, оно содержит файл de variables.scss:

 // 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';
  

У этого вопроса может быть много решений, и это моя точка зрения. Что бы я хотел сделать, так это создать хорошую файловую систему ресурсов

 resources
    |--assets
    |--web1
    |--web2
    |--web3
  

И в assets папку вставьте все общие файлы, которые вызываются в каждой web папке. Mix легко скомпилирует другой website-{n}.css файл, который должен быть основным css. Затем каждое представление, в зависимости от веб-сайта, будет загружаться website-1.css или website-2.css и так далее.