question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug(material-experimental/mdc-list): cannot compile scss after update to 11.2.2

See original GitHub issue

Unable to compile scss after upgrading to angular/core, angular/material & @angular/material-experiemental with error

17 │ ┌       @include mdc-list-deprecated-item-disabled-text-color(
18 │ │         $mdc-list-deprecated-text-disabled-color, $query: $mat-theme-styles-query);
   │ └──────────────────────────────────────────────────────────────────────────────────^

Reproduction

Use StackBlitz to reproduce your issue:

Steps to reproduce:

ng update @angular/core
ng update @angular/material --force
yarn remove @angular/material-experimental material-components-web
yarn add @angular/material-experimental material-components-web
ng serve

Expected Behavior

What behavior were you expecting to see? It should compile succesfully.

Actual Behavior

Throws out a scss error.

Error: ./apps/ng-outpost/src/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
   ╷
17 │ ┌       @include mdc-list-deprecated-item-disabled-text-color(
18 │ │         $mdc-list-deprecated-text-disabled-color, $query: $mat-theme-styles-query);
   │ └──────────────────────────────────────────────────────────────────────────────────^
   ╵
  node_modules/@angular/material-experimental/mdc-core/option/_option-theme.scss 17:7  @content
  node_modules/@angular/material-experimental/mdc-helpers/_mdc-helpers.scss 228:3      mat-using-mdc-theme()
  node_modules/@angular/material-experimental/mdc-core/option/_option-theme.scss 12:3  mat-mdc-option-color()
  node_modules/@angular/material-experimental/mdc-core/option/_option-theme.scss 72:7  @content
  node_modules/@angular/material/core/theming/_theming.scss 342:3                      mat-private-check-duplicate-theme-styles()
  node_modules/@angular/material-experimental/mdc-core/option/_option-theme.scss 66:3  mat-mdc-option-theme()
  node_modules/@angular/material-experimental/mdc-core/_core-theme.scss 12:5           @content
  node_modules/@angular/material/core/theming/_theming.scss 342:3                      mat-private-check-duplicate-theme-styles()
  node_modules/@angular/material-experimental/mdc-core/_core-theme.scss 11:3           mat-mdc-core-theme()
  node_modules/@angular/material-experimental/mdc-theming/_all-theme.scss 27:5         @content
  node_modules/@angular/material/core/theming/_theming.scss 342:3                      mat-private-check-duplicate-theme-styles()
  node_modules/@angular/material-experimental/mdc-theming/_all-theme.scss 26:3         angular-material-mdc-theme()
  apps/ng-outpost/src/styles.scss 196:1                                                root stylesheet

My styles.scss at line 196.1 is

@include angular-material-mdc-theme($theme);

usual stuff going in the scss file.

$theme: mat-light-theme(
  (
    color: (
      primary: $theme-primary,
      accent: $theme-accent,
      // warn: $slogr-warn,
    ),
    typography: $typography-config,
    density: minimum,
  )
);

// Theme Init
@include angular-material-theme($theme);
@include angular-material-mdc-theme($theme);


Environment

  • Angular: 11.2.7
  • CDK/Material: 11.2.7
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:23 (16 by maintainers)

github_iconTop GitHub Comments

3reactions
lqccommented, Apr 27, 2021

The material-experimental SCSS is currently broken. Since @angular/components v11.2.2, the code tries to use mixins that are only present in MCW v11.0.0 - but if you upgrade to that version, the mdc-checkbox SCSS stops working because v11 moved deprecated styles that it uses.

So it seems there are no released @angular/components and MCW versions that you can make work.

1reaction
debuggerpkcommented, May 14, 2021

Thanks Splaktar

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can't compile scss file after upgrade to Angular Material 12
After upgrading our Angular project from Angular Material 11 to 12, our build script no longer compiles the scss files correctly.
Read more >
Stop using an extension to compile Sass - YouTube
I'm working on a Sass course! - https://beyondcss.dev/?utm_campaign=OlderYouTubeVideos&utm_source=YouTube Links ✓ Stephanie's npm script: ...
Read more >
Sass: @import
Sass extends CSS's @import rule with the ability to import Sass and CSS stylesheets, providing access to mixins, functions, and variables and combining ......
Read more >
sass-loader - webpack - JS.ORG
The loader will first try to resolve @import as a relative path. If it cannot be resolved, then the loader will try to...
Read more >
node-sass - npm
Wrapper around libsass. Latest version: 8.0.0, last published: 2 months ago. Start using node-sass in your project by running `npm i ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found