Components: material-experimental Sass compile error

[Totati]

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 [email protected]: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

[anwalkers]

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

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

[cgatian]

This may be related to the following issue.
https://github.com/webpack-contrib/sass-loader/issues/804

[cgatian]

I modified the scss-loader in CLI to use the webpackImporter: false, that didn't seem to have any impact.

[jymdman]

Finally got this working by modyfing some files in node_modules/@material/...

By looking at the error in for example:

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

I had to go to node_modules\@material\checkbox\_mixins.import.scss and change the line:
from: @forward "@material/animation" as mdc-animation-*;
to: @forward "@material/animation/index.scss" as mdc-animation-*;

Do this for every error that occurs (add /index.scss) and it will work!

Don't know if this really is a bug here in @angular/components or it should be fixed in some other module, like sass, material-components-web or angular-cli maybe?

This worked for me with {angular/cdk/material/material-experimental/angular-cli}@next.

[dagema1]

@cgatian how did you manage to modify the scss-loader to disable the webpackImporter ?

[devversion]

Yeah, this is an actual issue on the MDC side, or more specifically in the webpack sass-loader side. We cannot do much about these index imports, as they internally used in MDC Sass files.

Ideally, we'd fix this on the sass-loader side, or MDC uses explicit imports as an interim solution. It does not look like the sass-loader fix lands anytime soon though.

[jelbourn]

FYI the issue tracking this in sass-loader is here: https://github.com/webpack-contrib/sass-loader/issues/804

[i23591326]

it seems it was finally fixed a couple of months ago webpack-contrib/sass-loader#804

[jelbourn]

@i23591326 thanks, closing this then since I believe the issue has been resolved on the relevant repo

[i23591326]

just checked with @angular/cli and @angular-devkit 10.1.0-next.6 -- works fine. 10.0.*, unfortunately, is not enough

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}