shhdharmen

...
script:
  - ...
  - yarn build --base-href /my-awesome-project/
  - mv dist/index.html dist/404.html
...

shhdharmen

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

shhdharmen

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$theming-material-components-primary: mat-palette($mat-indigo);
$theming-material-components-accent: mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$theming-material-components-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).

shhdharmen

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

shhdharmen

// import custom componenet themes
// unofficial naming convention to support nice ordering of files in IDE 
// to see theme under the original style file of the componenent

// you only have to add additional componenets here (instead of in every theme class)
@mixin custom-components-theme($theme) {

}

shhdharmen

import { DragDropModule } from '@angular/cdk/drag-drop';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { NgModule } from '@angular/core';
import {
  MatAutocompleteModule,
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,

shhdharmen

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomMaterialModule } from '../custom-material/custom-material.module';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    CustomMaterialModule
  ]

shhdharmen

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [

shhdharmen

<mat-toolbar [color]="themeColor">
	Toolbar
</mat-toolbar>
<mat-sidenav-container class="example-container">
	<mat-sidenav #sidenav mode="side" opened>
		Sidenav content</mat-sidenav>
	<mat-sidenav-content>
		<ng-content></ng-content>
    </mat-sidenav-content>
</mat-sidenav-container>

shhdharmen

<app-sidenav [themeColor]="'primary'">
  Main Content
</app-sidenav>