时间戳

首页 > 解决方案 > 如何更好地处理 laravel 应用程序中的大 .scss 文件

laravel - 如何更好地处理 laravel 应用程序中的大 .scss 文件

问题描述

在我的 Laravel 7.6 / Blade / bootstrap 4 / flex 应用程序中，我有超过 1000 行的 resources/sass/frontend.scss 文件我还使用了大约 40 行的 resources/sass/_variables.scss 我运行命令

 npm run watch-poll

编译我的 2 个 scss 文件需要相当错误的时间。我想将 frontend.scss 拆分为几个小的 scss 文件，并想知道如何更好地使其获得更好的性能？

在我的资源/视图/布局/frontend.blade.php 我有

<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">

有几个小的 scss 文件是不是最好将它们包含在 frontend.scss 的顶部，就像我对 _variables.scss 所做的那样？如果这些文件的顺序有什么意义？

或者也许 beetr 在 frontend.blade.php 中包含生成的 .css 文件？

还是其他方式？

更新＃1：

我有资源/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;

和完整的内容资源/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   */

任何想法如何优化它？

谢谢！

标签： laravelsass

解决方案

您可以尝试使用此解决方案来保持 sass 代码的整洁，并且几乎与刀片的结构平行。

    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, ..., ...,

注意导入文件的顺序正确！

小额外：

在 Laravel 中，一旦我开始项目，我就习惯将 vendor.scss 编译为一个单独的文件，以避免每次保存时 npm 运行 watch compile（bootstrap、fontawesome 等）（不要忘记添加 vendor.css文件头部的公共路径，以及当你进入生产以使用 npm run production 缩小它时）。

我的 webpack.mix.js 看起来像：

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");

推荐阅读