How better to deal big .scss file in laravel app

Question

In my Laravel 7.6 / blade / bootstrap 4 / flex app I have resources/sass/frontend.scss file more 1000 rows Also I use resources/sass/_variables.scss with about 40 lines I run command

 npm run watch-poll

and it takes rather wrong time to compile my 2 scss files. I want to split frontend.scss into several small scss files and wonder how better to make it for better performance?

In my resources/views/layouts/frontend.blade.php I have

<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
<link rel="icon" type="image/png" href="/favicon.ico"/>
<link rel="alternate" type="application/atom+xml" title="News" href="/feed">

<link href="{{ asset('css/frontend.css') }}{{  "?dt=".time()  }}" rel="stylesheet" type="text/css">

Having several small scss files is it better to include them in at top of frontend.scss, like I do with _variables.scss? If the order of these files have meaning?

Or maybe beetr to include generated .css file in frontend.blade.php ?

Or some other way ?

UPDATED # 1:

I have resources/sass/_variables.scss :

// Body
// Typography
$font-family-sans-serif: "Roboto", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

$text-color: #636b6f;
$font_size: 18px;
//$font_size: 24px;

$background_color: #f5f8fa;
$border_color: #999;

$border-separator-color: 0.05rem solid #b3b3b3;
$item-border: 1px solid #92baa7;


$button_color: #FFFFFF;             /* color of button */


$cancel_background_color: #949494;  /* background color of cancel button */
$prev_background_color: #45A6F9;    /* background color of previos button */
$text_error_color: red;
$link_color: #475fe8;//maroon;
$toggle_color: olive;

$indent_xs_1: 0.1em;
$indent_xs_2: 0.2em;
$indent_xs: 0.3em;

$indent_sm: 0.5em;
$indent_md: 1em;
$indent_lg: 2em;
$text_color : #00001D;
$indent_img : 0.7em; /* $indent for image : margin, padding */

$current_admin_template: 'defaultBS41Backend';
$debug_mode : false;

and full content resources/sass/FlexyFrontend/frontend.scss :

@import "node_modules/font-awesome/scss/font-awesome";

@font-face {
  font-family:'Simple line icons';
  src:url('/fonts/simple-line-icons/Simple-Line-Icons.ttf');
  font-style:normal;
}


@font-face {
  font-family:'Themify';
  src:url('/fonts/themify/themify.ttf');
  font-style:normal;
}

@font-face {
  font-family:'Source sans pro';
  src:url('/fonts/source-sans/sourcesanspro-regular-webfont.ttf');
  font-style:normal
}


@font-face {
  font-family:'Open sans' ;
  src:url('/fonts/opensans/opensans.ttf');
  font-style:normal;
}


@font-face {
  font-family:'DejaVu Sans';
  src:url('/fonts/DejaVuSans/DejaVuSans-Bold.ttf');
  font-style:normal;
}

// Variables
@import "../variables";


// Bootstrap
@import '~bootstrap/scss/bootstrap';



*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;
}

body {
  background-color: $background_color;

  //color: #cccccc;
  //font-size: 14px;
  /* Helvetica/Arial-based sans serif stack */
  font-family: 'Roboto', 'Open Sans';
  font-size: $font_size;

}


.wrapper_area {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header_area, .footer_area {
  background: silver;
}

.content_area {
  flex: 1;
  overflow: auto;
  background: pink;
}

///  COMMON ELEMENTS BLOCK START
.bordered_item {
  border: 1px ridge grey !important;
  //border: 2px solid yellow;
}

.bordered_block {
  border: $border-separator-color;
  font-size: $font_size;
  color: $text-color;

  padding: 0 0.4em 0.4em 0.4em;
  margin: 0 0 1.5em 0;

  -webkit-box-shadow: 5px 5px 5px 5px #000;
  box-shadow: 2px 2px 2px 2px #d7d7d7;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
}
.hidden_info {
  color:$background_color;
  //display: none;
  //color:$text-color;
  background-color:$background_color;
}

///  COMMON ELEMENTS BLOCK END





.page_content_container {
  @if ($debug_mode) {
    border: 3px dotted yellow;
  }
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  justify-self: flex-start;
  justify-items: flex-start;
}

.raised_page_content_container {
  flex: 1 1 200px;
  padding: 20px;
  margin: auto;
  margin-top: 15%;
  overflow-y: auto;
}

.page_content_header {
  @if ($debug_mode) {
    border: 0.2rem dotted green;
  }
  padding: 0px;
  margin: 0;
}


.page_content {
  flex: 1 1;
  @if ($debug_mode) {
    border: 3px dotted red !important;
  }
  justify-self: flex-start;
  justify-items: flex-start;
  align-self: flex-start;
  align-items: flex-start;
  padding: 0;
  margin: 0;
  width: 100% !important;
  height: 100% !important;
  .bordered_block{}
}

.page_content_footer {
  flex: 1;
  @if ($debug_mode) {
    border: 2px dotted olive;
  }
  padding: 0px;
  margin: 0;
}


.content_container {
  width: 100%;
  padding: 4px;
}


.card, .card-body, .card-text, .card-title, .card-footer {
  background-color: $background_color !important;
  //background-color: green  !important;
  font-family: 'Roboto', 'Open Sans' !important;
  text-decoration: none !important;
  border: none;
  border-radius: 0;
}

section {
  float: left;
  width: 100%;
  background: $background_color; /* fallback for old browsers */
  padding: 30px 0;
}

//h1{float:left; width:100%; color:#232323; margin-bottom:30px; font-size: 14px;}
//h1 span{font-family: Roboto, serif; display:block; font-size:45px; text-transform:none; margin-bottom:20px; margin-top:30px; font-weight:700}
//h1 a{color:#131313; font-weight:bold;}

.banner_image {
  border-radius: 20%;
  border-style: outset;

  border-corner-shape: bevel;

  -webkit-border-radius: 20%;
  -moz-border-radius: 20%;
  -webkit-box-shadow: #000 0 2px 10px;
  -moz-box-shadow: #000 0 2px 10px;

  padding: 8px;
  box-shadow: 0px 0px 20px #b4b4b4;

  border-top:none;
  border-left:none;
  border-right:solid 2px #dddddd;
  border-bottom:solid 2px #dddddd;
}

.found_text {
  background-color: #faff98;
}

.badge {
  display: inline-block;
  min-width: 10px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #777;
  border-radius: 10px;
}

.img-preview-wrapper {
  text-align: center !important;
  border: none;
}

.news-preview-wrapper {
  text-align: center !important;
  border: none;
}

///  COMMON FLEX ELEMENTS BLOCK START

.block_splitting_left_23 {
  display: flex;
  justify-self: flex-start;
  flex: 2 1 0;
  font-weight: normal;
  @if ($debug_mode) {
    border: 6px dotted green;
  }
}

.block_splitting_right_13 {
  display: flex;
  justify-self: flex-start;
  flex: 1 1 0 ;
  font-weight: normal;
  color: #403941;
  width: 100% !important;
  @if ($debug_mode) {
    border: 5px dotted red;
  }
}

.block_splitting_left_half {
  display: flex;
  justify-self: flex-start;
  flex: 1;
  font-weight: normal;
  @if ($debug_mode) {
    border: 6px dotted yellow;
  }
}

.block_splitting_right_half {
  display: flex;
  justify-self: flex-end;
  flex: 1 ;
  font-weight: normal;
  color: #403941;
  @if ($debug_mode) {
    border: 5px dotted maroon;
  }
}





.key_values_rows_label_half {
  display: flex;
  justify-self: flex-start;
  flex: 1;
  font-weight: normal;
  @if ($debug_mode) {
    border: 2px dotted green;
  }
  flex-wrap: nowrap;
  white-space: nowrap;
}

.key_values_rows_value_half {
  justify-self: flex-end;
  flex: 1;
  font-weight: normal;
  color: #403941;
  @if ($debug_mode) {
    border: 2px dotted red;
  }
}

.key_values_rows_label_13 {
  display: flex;
  justify-self: flex-start;
  flex: 1 1 30px;
  font-weight: normal;
  @if ($debug_mode) {
    border: 2px dotted green;
  }
  width: auto;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.key_values_rows_value_13 {
  justify-self: flex-end;
  flex: 3 1;
  font-weight: normal;
  color: #403941;
  margin: 0;
  padding: 0;
  @if ($debug_mode) {
    border: 2px dotted red;
  }
}


.space_between_wraping_cell {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.column_content_left_aligned {
  @if ($debug_mode) {
    border: 2px dotted blue;
  }
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-items: flex-start;
  align-items: flex-start;
  width: 100% !important;
}

.column_content_centered {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

.row_content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  //align-items: center;
  //border: 2px dotted green;
}

.column_content {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
}

.row_content_centered {
  display: flex !important;
  flex-direction: row  !important;
  justify-content: space-around  !important;
  align-items: center;
  @if ($debug_mode) {
    border: 3px dotted red !important;
  }
}

.row_content_right_aligned {
  display: flex !important;
  flex-direction: row  !important;
  justify-content: flex-end  !important;
  align-items: center;
  border: 0px dotted green !important;
}

.key_values_rows {
  display: flex;
  flex-direction: row;
  padding: 4px;
}

.key_values_rows_value {
  justify-self: flex-end;
  font-weight: normal;
  color: #403941;
}

.key_values_rows_label {
  display: flex;
  justify-self: flex-start;
  flex: 4;
  font-weight: normal;
}

.bottom_split_border {
  border-bottom: $border-separator-color !important;
}
.top_split_border {
  border-top: $border-separator-color !important;
}
///  COMMON FLEX ELEMENTS BLOCK END






// DIFFERENT DEVICES BLOCK START

/* Big Media */

.block_2columns_md {
  display: flex;
  flex-direction: row;
  padding: 0;
  margin: 0;
  @if ($debug_mode) {
    border: 4px ridge blue !important;
  }
  width: 100%;
}

.block_2columns_sm {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 4px;
  @if ($debug_mode) {
    border: 3px solid red;
  }
  width: 100%;

}

img.lazy {
  border: 4px dotted red !important;
  background-color: yellow !important;
}

.lazy_image {
  border: 4px dotted red !important;
  background-color: yellow !important;
}
.vote_item {
  @extend .bordered_item;
}
.single_vote_image_left_aligned {
  //border: 1px dotted gray;
  border: 2px dotted red;
  padding: 2px;
  margin: 5px;
  height: auto;
}

.image_in_3_columns_list {
  border: 1px dotted gray;
  //border: 2px dotted green;
  padding: 2px;
  margin: 2px;
  max-width: 280px;
  height: auto;
}
.vote_item_selection_image {
  border: 1px dotted gray;
  padding: 2px;
  margin: 5px;
}

/* Large ≥992px  ipad pro  */
@media only screen and (min-width: 1280px) { /* Extra large ≥ 1200px  */
  .single_vote_image_left_aligned {
    max-width: 340px;
  }

  .image_in_3_columns_list {
    max-width: 280px;
  }

  .img_full_width_wrapper {
    max-width: 1080px;
    height: auto;
    padding: 4px;
    margin: 0;
  }

  .category_image {
    max-width: 1030px;
    height: auto;
    padding: 1px;
    border: $border-separator-color;
  }

  .flexbox-parent {
    padding-left: 280px !important;
    padding-right: 280px !important;
  }

  .test-device {
    background: url(/images/test-device/exlg.png) center center no-repeat;
    border: 1px dotted #2D27B6;
    margin: 1px;
    min-width: 48px;
    height: 32px;
  }


  .banner_image {
    border-radius: 20%;
    border-style: outset;
    border-corner-shape: bevel;
    max-width: 340px;
    height: auto;
  }
  .vote_item_selection_image {
    max-width: 380px;
    height: auto;
  }

} // @media only screen and (min-width: 1280px) { /* Extra large ≥ 1200px  */

@media only screen and (min-width: 992px) and (max-width: 1280px) { /*lg*/
  .single_vote_image_left_aligned {
    max-width: 300px;
  }
  .image_in_3_columns_list {
    max-width: 220px;
  }

  .img_full_width_wrapper {
    max-width: 820px;
    height: auto;
    padding: 4px;
    margin: 0;
  }

  .category_image {
    max-width: 680px;
    height: auto;
    padding: 1px;
    border: $border-separator-color;
  }

  .flexbox-parent {
    padding-left: 120px !important;
    padding-right: 120px !important;
  }

  .test-device {
    background: url(/images/test-device/lg.png) center center no-repeat;
    border: 1px dotted #2D27B6;
    margin: 1px;
    min-width: 32px;
    height: 32px;
  }

  .banner_image {
    border-radius: 20%;
    border-style: outset;
    border-corner-shape: bevel;
    max-width: 300px;
    height: auto;
  }

  .vote_item_selection_image {
    max-width: 300px;
    height: auto;
  }

} // @media only screen and (min-width: 992px) and (max-width: 1280px) { /*lg*/


/* md : Medium ≥768px  ipad or ipad mini */
@media only screen and (min-width: 768px) and (max-width: 991px) { /* Ipad Pro md */
  .single_vote_image_left_aligned {
    max-width: 200px;
  }
  .image_in_3_columns_list {
    max-width: 200px;
  }

  .img_full_width_wrapper {
    max-width: 600px;
    height: auto;
    padding: 4px;
    margin: 0;
  }

  .category_image {
    max-width: 580px;
    height: auto;
    padding: 1px;
    border: $border-separator-color;
  }

  .v--modal {
    top: 25px !important;
    left: 25px !important;
    width: 720px !important;
    height: 960px !important;
  }

  .flexbox-parent {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  .page_content_container {
    padding: 12px;
  }
  .test-device {
    background: url(/images/test-device/md.png) center center no-repeat;
    border: 1px dotted #2D27B6;
    margin: 1px;
    min-width: 32px;
    height: 32px;
  }

  .banner_image {
    border-radius: 20%;
    border-style: outset;
    border-corner-shape: bevel;
    max-width: 200px;
    height: auto;
  }
  .vote_item_selection_image {
    max-width: 180px;
    height: auto;
  }

} // @media only screen and (min-width: 768px) and (max-width: 991px) { /* md - Ipad Pro  */

/* sm : Small ≥ 576px Nexus7 */
@media only screen and (min-width: 576px) and (max-width: 767px) { /* sm : Nexus 7 */
  .single_vote_image_left_aligned {
    max-width: 240px;
  }
  .image_in_3_columns_list {
    max-width: 220px;
  }

  .img_full_width_wrapper {
    max-width: 500px;
    height: auto;
    padding: 4px;
    margin: 0;
  }
  .category_image {
    max-width: 500px;
    height: auto;
    padding: 1px;
    border: $border-separator-color;
  }

  .v--modal {
    top: 20px !important;
    left: 20px !important;
    width: 560px !important;
    height: 920px !important;
  }
  .flexbox-parent {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .page_content_container {
    padding: 8px;
  }
  .block_2columns_md { /* sm */
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    @if ($debug_mode) {
      border: 3px solid greenyellow;
    }
    width: 100%;
  }

  .test-device { /* xs600.png */
    background: url(/images/test-device/sm.png) center center no-repeat;
    border: 1px dotted #2D27B6;
    margin: 1px;
    min-width: 64px;
    height: 32px;
  }

  .banner_image {
    border-radius: 20%;
    border-style: outset;
    border-corner-shape: bevel;
    max-width: 480px;
    height: auto;
  }

  .vote_item_selection_image {
    max-width: 400px;
    height: auto;
  }

}  //@media only screen and (min-width: 576px) and (max-width: 767px) { /* sm : Nexus 7 */

/* xs :  Extra small < 576px    iphon5/SE  */
@media only screen and (max-width: 575px) { /* iphon5/SE */
  .single_vote_image_left_aligned {
    max-width: 120px;
  }

  .image_in_3_columns_list {
    max-width: 240px;
  }

  .task_image {
    max-width: 100px;
    height: auto;
    padding: 1px;
    border: $border-separator-color;
  }

  .category_image {
    max-width: 280px;
    height: auto;
    padding: 1px;
    border: $border-separator-color;
  }

  .img_full_width_wrapper {
    max-width: 260px;
    height: auto;
    padding: 4px;
    margin: 0;
  }
  .v--modal {
    top: 10px !important;
    left: 10px !important;
    width: 300px !important;
    height: 540px !important;
  }

  .flexbox-parent {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  .page_content_container {
    padding: 2px;
    margin: auto;
  }

  .block_2columns_md { /* xs - iphon5/SE */
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    @if ($debug_mode) {
      border: 2px solid blue;
    }
    width: 100%;
  }
  .test-device {
    background: url(/images/test-device/xs.png) center center no-repeat;
    border: 1px dotted #2D27B6;
    margin: 1px;
    min-width: 64px;
    height: 32px;
  }

  .banner_image {
    border-radius: 20%;
    border-style: outset;
    border-corner-shape: bevel;
    max-width: 250px;
    height: auto;
  }

  .vote_item_selection_image {
    max-width: 200px;
    height: auto;
  }

} //@media only screen and (max-width: 575px) { /* xs - iphon5/SE */

// DIFFERENT DEVICES BLOCK END

///  FLEX BUTTONS BLOCK START
.content_with_right_button {
  display: flex;
  flex-direction: row;
}

.content_with_right_button_left_content {
  display: flex;
  flex: 1 1;
  @if ($debug_mode) {
    border: 2px dotted green;
  }
}

.content_with_right_button_right_button {
  display: flex;
  flex: 0 0 30px;
  @if ($debug_mode) {
    border: 2px dotted red;
  }
  align-items: center;
  justify-content: center;
}
///  FLEX BUTTONS BLOCK END

///  FLEX BADGE BLOCK START
.badge_item_row {
  flex: 1 0 2rem;
  //background-color: lightpink;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}


.badge_item_row_cell {
  flex-wrap: wrap;
  flex: 1 0;
  align-content: center;
  justify-content: space-around;
  padding: 0;
  @if ($debug_mode) {
    border: 2px dotted red !important;
  }
}
///  FLEX BADGE BLOCK START



/* FOOTER BLOCK START */

.context-dark, .bg-gray-dark, .bg-primary {
  color: rgba(255, 255, 255, 0.8);
}

.footer-classic a, .footer-classic a:focus, .footer-classic a:active {
  color: #0b0b0b;
}

.nav-list li {
  padding-top: 5px;
  padding-bottom: 5px;
}

.nav-list li a:hover:before {
  margin-left: 0;
  opacity: 1;
  visibility: visible;
}

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 5px 0 5px 0 !important;
  margin: 0 !important;
  color: white;
  background-color: #2D3246 !important;
}

footer {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
.menu-items-container {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 !important;
  margin: 0 !important;
  background-color: #2D3246 !important;
}


.nav-list li a:before {
  content: "\f14f";
  font: 400 21px/1 "Material Design Icons";
  //color: #4d6de6;
  display: inline-block;
  vertical-align: baseline;
  margin-left: -28px;
  margin-right: 7px;
  opacity: 0;
  visibility: hidden;
  transition: .22s ease;
}


.app_title_icon_selected_dashboard {
  color: transparent;
  background-color: white;
  margin-right: 5px;
}

.app_title_icon_warning {
  color: red;
  background-color: yellow ;
  margin-right: 5px;
}

.app_title_icon {
  color: $text-color;
  background-color: transparent;
  margin-right: 5px;
}

/* FOOTER BLOCK END  */

/*  breadcrumb BLOCK START   */
.breadcrumb {
  margin: 0px;
  padding: 0px;
  //border: 0px dotted green;
}

.breadcrumb-item {
  //background-color: darkgrey;
}

.breadcrumb-item.active {
}

/*  breadcrumb BLOCK END   */



/*  COMPONENTS BLOCK START   */
.taggable-votes-block {
  width: 100% !important;
  padding: 12px !important;
  margin: 0 !important;
  flex: 1 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  @extend .bordered_block
}

.active-vote-categories-block {
  width: 100% !important;
  padding: 12px !important;
  margin: 0 !important;
  flex: 1 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  @extend .bordered_block
}


.most-rating-quiz-quality-block {
  width: 100% !important;
  padding: 12px !important;
  margin: 0 !important;
  @extend .bordered_block
  //border: 2px dotted blue !important;
}
.active-banners-block {
  width: 100% !important;
  padding: 12px !important;
  margin: 0 !important;
  @extend .bordered_block
  //border: 2px dotted blue !important;
}

.block-selection {
  //z-index: 1;
  border: 4px ridge #fffffe;
  padding: 0;
  margin: 0;
  //background-color: yellow;
}
/*  COMPONENTS BLOCK END   */

Any ideas how to optimize it ?

Thanks!

Answer 1

You could try with this solution to keep tidy your sass code and almost parallel to the structure of your blades .

    sass/
|
|– general/
|–  |- parts/
|       |– _reset.scss               // Reset Style
|       |– _typography.scss          // Import fonts and define property
|       |– _variables.scss           // Define scss variables
|   |
|   |- _general.scss                 // Import all the general parts
|
|– layout/
|   |- parts/
|       |– _navigations.scss         // Navigation
|       |– _header.scss              // Header
|       |– _footer.scss              // Footer
|       |– _sidebar.scss             // Sidebar
|   |
|   |– _layouts.scss                 // Import all the layout parts
|
|– fontend/               
|   |- page/
|       |– parts/         // Page sections
|       |– _page.scss     // Import all the page sections
|   |
|   |– _frontend.scss     // Import _page.scss
|   
|– admin/               
|   |- page/
|       |– parts/         // Page sections
|       |– _page.scss     // Import all the page sections
|   |
|   |– _admin.scss        // Import _page.scss
|   
|
`– main.scss              // Import _general.scss,_layout.scss, ..., ...,
 - vendors.scss           // Import Bootstrap,Fontawesome, ..., ...,
  

Pay attention to import the files in the correct order!

Little Extra:

In Laravel I've got used to compile vendors.scss as a separate file once I started the project to avoid that npm run watch compile (bootstrap, fontawesome, etc.) at every save (Don't forget to add the vendors.css public path to the head of your documents and when you go to production to minify it with npm run production).

My webpack.mix.js looks like:

const mix = require("laravel-mix");



mix.js('resources/js/app.js', 'public/js');

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

// Uncomment the next line to compile vendors scss
//mix.sass("resources/sass/vendors.scss", "public/css");