material-experimental Sass compile error

I tried to create a workplace, experimenting with mdc-components, but I get an error while trying to include the theme. I followed the outdated readme, but I could not figure out how to make it work.

Reproduction

https://github.com/Totati/angular-components-mdc

git clone git@github.com:Totati/angular-components-mdc.git
npm install
npm start

Actual Behavior

Throws error

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--15-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: This variable is available from multiple global modules:
• node_modules\@material\checkbox\_variables.scss
• node_modules\@material\checkbox\_variables.scss
   ╷
21 │     $mdc-checkbox-mark-color: mdc-theme-prop-value(on-primary) !global;
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules\@angular\material-experimental\mdc-checkbox\_mdc-checkbox.scss 21:5  @import
  C:\Repos\angular-components-mdc\src\styles.scss 5:9

Environment

Angular CLI: 9.0.0-rc.12
Node: 10.16.0
OS: win32 x64

Angular: 9.0.0-rc.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.12
@angular-devkit/build-angular     0.900.0-rc.12
@angular-devkit/build-optimizer   0.900.0-rc.12
@angular-devkit/build-webpack     0.900.0-rc.12
@angular-devkit/core              9.0.0-rc.12
@angular-devkit/schematics        9.0.0-rc.12
@angular/cdk                      9.0.0-rc.9
@angular/cli                      9.0.0-rc.12
@angular/material                 9.0.0-rc.9
@angular/material-experimental    9.0.0-rc.9
@ngtools/webpack                  9.0.0-rc.12
@schematics/angular               9.0.0-rc.12
@schematics/update                0.900.0-rc.12
rxjs                              6.5.4
typescript                        3.6.5
webpack                           4.41.2

2 thoughts on “material-experimental Sass compile error

  1. Similar error. Looks like a disconnect on Sass interpreters…

    Reproduction

    ng new material-experimental
    cd .\material-experimental\
    ng update @angular/cli@latest --force
    ng add @angular/material@latest
    npm i material-components-web@latest @angular/material-experimental@latest  --save
    

    In angular.json add the include path for style preprossessor

    "stylePreprocessorOptions": {
      "includePaths": [
        "node_modules/"
       ]
     },

    In the app.module.ts add the mdc checkbox

    ...
    import { MatCheckboxModule } from '@angular/material-experimental/mdc-checkbox';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        ...
        MatCheckboxModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    Add the markup to the app.component.html and isChecked property to app.component.ts

    <div>
      <mat-checkbox [checked]="isChecked">Check me</mat-checkbox>
    </div>
      isChecked = false;

    If I compile or serve the site, it renders the checkbox in the page…

    image

    Now to break it. In the theming.scss add the styling and typography for the mdc checkbox

    @import '~@angular/material/theming';
    @import '~@angular/material-experimental/mdc-checkbox/checkbox-theme';
    
    $my-primary: mat-palette($mat-indigo);
    $my-accent:  mat-palette($mat-pink, A200, A100, A400);
    $my-theme:   mat-light-theme($my-primary, $my-accent);
    
    @include mat-mdc-checkbox-theme($my-theme);
    @include mat-mdc-checkbox-typography();

    Build output

    PS C:\Source\Temp\material-experimental> ng build
    
    ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--13-3!./src/styles.scss)
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: Can't find stylesheet to import.
    
    1 │ @forward "@material/animation" as mdc-animation-*;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    
      node_modules\@material\checkbox\_mixins.import.scss 1:1                            @import
      node_modules\@angular\material-experimental\mdc-checkbox\_checkbox-theme.scss 1:9  @import
      C:\Source\Temp\material-experimental\src\styles.scss 6:9                                                                          root stylesheet
    SassError: SassError: Can't find stylesheet to import.
      ╷
    1@forward "@material/animation" as mdc-animation-*;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      ╵
      node_modules\@material\checkbox\_mixins.import.scss 1:1                            @import
      node_modules\@angular\material-experimental\mdc-checkbox\_checkbox-theme.scss 1:9  @import
      C:\Source\Temp\material-experimental\src\styles.scss 6:9                                                                          root stylesheet
        at C:\Source\Temp\material-experimental\node_modules\sass-loader\dist\index.js:73:16
        at Function.call$2 (C:\Source\Temp\material-experimental\node_modules\sass\sass.dart.js:87203:16)
        at _render_closure1.call$2 (C:\Source\Temp\material-experimental\node_modules\sass\sass.dart.js:76994:12)
        at _RootZone.runBinary$3$3 (C:\Source\Temp\material-experimental\node_modules\sass\sass.dart.js:25521:18)
        at _RootZone.runBinary$3 (C:\Source\Temp\material-experimental\node_modules\sass\sass.dart.js:25525:19)
        at _FutureListener.handleError$1 (C:\Source\Temp\material-experimental\node_modules\sass\sass.dart.js:23975:19)
        at _Future__propagateToListeners_handleError.call$0 (C:\Source\Temp\material-experimental\node_modules\sass\sass.dart.js:24271:40)
        at Object._Future__propagateToListeners (C:\Source\Temp\material-experimental\node_modules\sass\sass.dart.js:3500:88)
        at _Future._completeError$2 (C:\Source\Temp\material-experimental\node_modules\sass\sass.dart.js:24099:9)
        at _AsyncAwaitCompleter.completeError$2 (C:\Source\Temp\material-experimental\node_modules\sass\sass.dart.js:23491:12)
        at Object._asyncRethrow (C:\Source\Temp\material-experimental\node_modules\sass\sass.dart.js:3256:17)
        at C:\Source\Temp\material-experimental\node_modules\sass\sass.dart.js:13326:20
        at _wrapJsFunctionForAsync_closure.$protected (C:\Source\Temp\material-experimental\node_modules\sass\sass.dart.js:3279:15)
        at _wrapJsFunctionForAsync_closure.call$2 (C:\Source\Temp\material-experimental\node_modules\sass\sass.dart.js:23512:12)
        at _awaitOnObject_closure0.call$2 (C:\Source\Temp\material-experimental\node_modules\sass\sass.dart.js:23504:25)
        at _RootZone.runBinary$3$3 (C:\Source\Temp\material-experimental\node_modules\sass\sass.dart.js:25521:18)
     @ ./src/styles.scss 2:26-207
     @ multi ./node_modules/@angular/material/prebuilt-themes/purple-green.css ./src/styles.scss

    Environment

    Angular CLI: 9.1.4
    Node: 12.16.3
    OS: win32 x64
    
    Angular: 9.1.4
    ... animations, cli, common, compiler, compiler-cli, core, forms
    ... language-service, platform-browser, platform-browser-dynamic
    ... router
    Ivy Workspace: Yes
    
    Package                           Version
    -----------------------------------------------------------
    @angular-devkit/architect         0.901.4
    @angular-devkit/build-angular     0.901.4
    @angular-devkit/build-optimizer   0.901.4
    @angular-devkit/build-webpack     0.901.4
    @angular-devkit/core              9.1.4
    @angular-devkit/schematics        9.1.4
    @angular/cdk                      9.2.2
    @angular/material                 9.2.2
    @angular/material-experimental    9.2.2
    @ngtools/webpack                  9.1.4
    @schematics/angular               9.1.4
    @schematics/update                0.901.4
    rxjs                              6.5.5
    typescript                        3.8.3
    webpack                           4.42.0