Sass mixin for styling scrollbars in webkit by Hugo Giraudel (http://codepen.io/HugoGiraudel/pen/KFDuB)

scrollbar-mixin

/**
 * Mixin scrollbar
 */
@mixin scrollbar($size, $primary, $secondary: lighten($primary, 25%)) {
  ::-webkit-scrollbar {
		width:  $size;
		height: $size;
	}

	::-webkit-scrollbar-thumb {
		background: $primary;
	}

	::-webkit-scrollbar-track {
		background: $secondary;
	}
  
  // For Internet Explorer
  body {
    scrollbar-face-color: $primary;
    scrollbar-track-color: $secondary;
  }
}

/**
 * Call the damn thing
 */
@include scrollbar(.5em, tomato);

/** 
 * Force scrollbars
 */
body {
  height: 3000px;
  width:  3000px;
}

I think probably the body css rules are not entirely needed necessary as they easily apply the styles to any scrollbar in the website. Great mixin!!!

Actually doesn't work until you add & symbol before ::-webkit... rules to reference the selector you are applying the mixin to. After that, works like charm

webpack4 sass-loader on win10