Can't customize theme with SCSS

Hi! I'm new to dart yet, and I'm trying to customize the theme colors...

I did build an very simple drawer and top bar app to start with, here is my template:

<aside class="mdc-drawer mdc-drawer--modal"  [ngClass]="{ 'mdc-drawer--open': showMenu }">
    <div class="mdc-drawer__content">
        <div class="mdc-list">
            <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true">
                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
                <span class="mdc-list-item__text">Inbox</span>
            </a>
            <a class="mdc-list-item" href="#">
                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
                <span class="mdc-list-item__text">Outgoing</span>
            </a>
            <a class="mdc-list-item" href="#">
                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
                <span class="mdc-list-item__text">Drafts</span>
            </a>
        </div>
    </div>
</aside>
<div class="mdc-drawer-scrim" (click)="toggleMenu()"></div>
<div class="mdc-drawer-frame-content">
    <header class="mdc-top-app-bar app-bar" id="app-bar">
        <div class="mdc-top-app-bar__row">
            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                <a href="#" (click)="toggleMenu()" class="demo-menu material-icons mdc-top-app-bar__navigation-icon">menu</a>
                <span class="mdc-top-app-bar__title">Dismissible Drawer</span>
            </section>
        </div>
    </header>

    <main class="main-content" id="main-content">
        <div class="mdc-top-app-bar--fixed-adjust">
            App Content
        </div>
    </main>
</div>

And I just copy/paste the Material Component SCSS vars to my .scss file to try customize it...

Here is my scss file.

$mdc-theme-primary: #fcb8ab;
$mdc-theme-secondary: rgb(66, 189, 189);
$mdc-theme-on-primary: #442b2d;
$mdc-theme-on-secondary: #212121;

// @import "material-components-web/material-components-web";
@import 'https://unpkg.com/material-components-web@latest/dist/material-components-web.css';

If I import the second line, it imports all default template, and ok... But if I try to import only the first line, it gives me this error:

[INFO] Starting Build
[INFO] Updating asset graph completed, took 3ms
[SEVERE] sass_builder on web/styles.scss:

Error: Can't find stylesheet to import.
   ╷
38 │ @import "material-components-web/material-components-web";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  - 38:9  root stylesheet
[INFO] Running build completed, took 348ms
[INFO] Caching finalized dependency graph completed, took 333ms
[SEVERE] Failed after 690ms

I'm using Dart 2 and just tried to run npm i material-components-web also with no success...

So, currently, I can use only the default template imported from unpkg url, and I am unable to customize without doing hardcoded CSS override.

And here is my pubspec.yaml

name: angular_app
description: A web app that uses AngularDart
version: 0.0.1

environment:
  sdk: '>=2.2.0 <3.0.0'

dependencies:
  angular: ^5.0.0
  angular_forms:
  angular_router: ^2.0.0-alpha+19
  http: ^0.11.0
  stream_transform: ^0.0.6
  sass_builder:
  angular_components:
  mdc_web: ^0.4.0

dev_dependencies:
  angular_test: ^2.0.0
  build_runner: ^1.0.0
  build_test: ^0.10.2
  build_web_compilers: ^0.4.0
  test: ^1.0.0

Any clues about how to import/customize it using scss?

jifalops / mdc_web

Can't customize theme with SCSS #3