bug(material-experimental/mdc-list): cannot compile scss after update to 11.2.2
See original GitHub issueUnable 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:
- Components: https://stackblitz.com/fork/components-issue
- Harnesses: https://stackblitz.com/fork/harness-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:
- Created 2 years ago
- Comments:23 (16 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
Thanks Splaktar