bug(theming/migration): `@angular/material/theming` SCSS entrypoint removed in v17

[benelliott]

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16.2.x

Description

The @angular/material/theming entrypoint is broken in v17.x.

It looks like the src/material/_theming.scss file was deliberately removed as part of https://github.com/angular/components/commit/86e9e524c3234f44eece21632048cd4290e5f3f4#diff-bfa19b8f86d56d399fc0cb86ac55e1b95d161f081beb123cd2bcf31196eae030

However, I can't seem to find any mention of this breaking change in the release notes, nor is the problem automatically fixed by the migration schematic.

Additionally, the entrypoint still appears in the package.json: https://github.com/angular/components/blob/main/src/material/package-base.json#L20

Reproduction

StackBlitz link: Steps to reproduce: 1. 2.

Expected Behavior

Either the entrypoint should still work, or there should be some documentation as to how to migrate away from it.

I was previously using it to import public values such as $light-primary-text for use in my own palettes.

Actual Behavior

The entrypoint no longer works, but still appears in the package.json.

Environment

• Angular: 17.x
• CDK/Material: 17.x
• Browser(s): N/A
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[jkapongo]

Seems to have been moved to @angular/material/core/theming/theming

[Michel73]

Seems to have been moved to @angular/material/core/theming/theming

I don't think it's moved. It was already there in v16.

[dburgos92]

I just remove the import , and my theme working well. It`s very strange

Before

@use '@angular/material' as mat;
@import '@angular/material/theming';

After

@use '@angular/material' as mat;

[mmalerba]

Using Sass @import for Angular Material has been deprecated for a while (since at least v12 I believe). In v17 we removed CSS that was only there for backwards compatibility with @import. All usages of our Sass should go through @use now.

[benelliott]

Hi @mmalerba , the issue occurs regardless (I was using @use).

[benelliott]

@mmalerba Can you reopen this please? It has nothing to do with @use.

[KarolZirex]

Anyone fixed that problem?

[dangigrv]

Do we have any workaround

[scurtis7]

The only way I could get an @import to work was make it a relative path, which is horrendous but works. From: @import "src/assets/styles/variables"; To: @import "../../../../assets/styles/variables";

[imasip]

Using Sass @import for Angular Material has been deprecated for a while (since at least v12 I believe). In v17 we removed CSS that was only there for backwards compatibility with @import. All usages of our Sass should go through @use now.

I'm apply this solution and fix the problem. You should change your main.scss for usage @use instead on @import.

[born2net]

any resolution to this issue? same problem here :/

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

[mmalerba]

For our @use API, everything can be accessed from the top-level entry point: @use '@angular/material' as mat;. The @angular/material/theming entry point was only exposed to support pre-existing @import statements which were deprecated a long time back