Angular 12 migration does NOT refactor @import to @use AND @use still has at-rule unknown

[stot3]

Bug Report

Affected Package

@angular/dev-kit

Is this a regression?

No, @use never worked.

Description

After updating to Angular 12 and reading the blog post @use was a long awaited feature, I was really looking forward to. I was reading about it recently while diving into sass. I updated and migrated to Angular 12 and my app.theme.scss file was NOT migrated. I checked in my package.json, I could not find node-sass, and the only scss loader I was using, was in the core Angular package.

Minimal Reproduction

Update to Angular 12 using ng update, migrating from 11.

I am not sure how to reproduce this on stackblitz, I can't use the command-line.

If StackBlitz is not suitable for reproduction of your issue, please create a minimal GitHub repository with the reproduction of the issue.
A good way to make a minimal reproduction is to create a new app via ng new repro-app and add the minimum possible code to show the problem.
Share the link to the repo below along with step-by-step instructions to reproduce the problem, as well as expected and actual behavior.

Issues that don't have enough info and can't be reproduced will be closed.

You can read more about issue submission guidelines here: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#submit-issue
-->

Exception or Error

Your Environment

Angular Version:

Angular CLI: 12.0.0
Node: 14.16.1
Package Manager: npm 7.12.0
OS: darwin x64

Angular: 12.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0
@angular-devkit/build-angular   12.0.0
@angular-devkit/core            12.0.0
@angular-devkit/schematics      12.0.0
@angular/fire                   6.1.0-rc.2
@schematics/angular             12.0.0
rxjs                            6.6.7
typescript                      4.2.4

[JoostK]

Moving to components repo as that's where the migration lives.

[mlc-mlapis]

@stot3 I don't think it was meant that the migration to @forward and @use would be automatic. We did it manually and also in relation to material@12. The result was that the size of served total main code decreased from 50 MB to 15 MB. So the impact is incredibly big.

[stot3]

Then the Angular language service needs to be updated so that the error @use at-rule unknown, goes away.

…

On May 18, 2021, at 1:54 PM, Miloš Lapiš ***@***.***> wrote: @stot3 <https://github.com/stot3> I don't think it was meant that the migration to @forward <https://github.com/forward> and @use <https://github.com/use> would be automatic. We did it manually and also in relation to ***@***.*** The result was that the size of served total main code decreased from 50 MB to 15 MB. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#22718 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACBPZGLCZK2CMQMKZWHZB73TOKSVRANCNFSM45C7WNZQ>.

[jelbourn]

@stot3 there's not enough information here- how did you run the migration? What does your theme file looks like? Did you install the sass npm package?

[stot3]

Here is my App.theme file ``` @import ***@***.***/material/theming'; @include mat-core(); $questions-primary: mat-palette($mat-brown); $questions-accent: mat-palette($mat-pink, A200, A100, A400); $questions-warn: mat-palette($mat-red); $questions-theme: mat-light-theme( $questions-primary, $questions-accent, $questions-warn ); $custom-typography: mat-typography-config( $font-family: 'Montserrat-Regular, sans-serif', $headline: mat-typography-level(32px, 48px, 700), $body-1: mat-typography-level(16px, 24px, 600) ); $primary: #a1887f; @include angular-material-typography($custom-typography); @include angular-material-theme($questions-theme); $mat-select: calc(100% - 90px); .mat-form-field-type-mat-native-select .mat-form-field-label-wrapper{ max-width: $mat-select } .mat-tab-labels{ justify-content: space-around } .mat-pseudo-checkbox-checked{ background-color:$primary !important; } .mat-tab-header{ border-bottom: none; } .mat-form-field-outline{ background: #FFFFFF; border-radius: 15px; } .mat-radio-button{ margin: 0.5rem; } .mat-expansion-panel-content{ max-height: 250px; overflow: scroll !important; } .mat-raised-button{ font-family: 'Montserrat-Semibold'; background: $primary; border-radius: 100px !important; color: #FFFFFF; width: 133px; } .mat-fab .mat-accent{ background-color: unset !important; background: linear-gradient(90deg, #119BF6 0%, #556AFF 46.87%, #CE5CA9 100%) !important; } .mat-tab-header{ background-color: #FFFFFF; } .border-radius-30 .mat-tab-header{ border-radius: 30px 30px 0 0 !important; } .mat-pseudo-checkbox-checked{ background: $primary !important; } .mat-pseudo-checkbox{ border-radius: 50px !important; } .mat-expansion-panel-body{ padding: 0 !important; } .mat-expansion-panel:hover{ box-shadow: 0px -1px 15px rgba(121, 40, 218, 0.05), 0px 4px 15px rgba(121, 40, 218, 0.15) !important; } .install-button{ background-color: #FFFFFF !important; border-radius: 100px; width: max-content; padding: 1em 3em; } .mat-icon-button{ display: flex; flex-direction: column; align-items: center; } .mat-mini-fab{ display:grid !important; } .mat-form-field-outline-thick{ background-color:#FFFFFF; border-radius: 15px; box-shadow: 0px 4px 15px 0px 0,0,0,0.06; } .mat-mini-fab{ width: 25px !important; height: 25px !important; } .mat-progress-bar{ height:8px !important; border-radius: 15px; } .mat-checkbox{ margin-top: 1rem; margin:12px; } .mat-checkbox-label{ white-space: normal; } .warn{ color: red; } .mat-divider{ margin: 0.7rem 0px !important; } .mat-button-wrapper{ line-height: auto; } ``` Lastly, to reiterate, I used the command ng update @angular/cli @angular/cdk @angular/core @angular/material

…

On May 18, 2021, at 2:04 PM, Jeremy Elbourn ***@***.***> wrote: Did you install the sass npm package?

[leylita]

Hi!

I have the same problem with my angular project.
I did the migration of Angular 11 to Angular 12 ("@angular/material": "12.0.3")
Since that I can't build anymore my app.

My error is that :

./src/styles.scss - Error: 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: @use rules must be written before any other rules.
   ╷
52 │ @use '~@angular/material' as mat;

My configuration is :

Angular CLI: 12.0.3
Node: 14.15.3
Package Manager: npm 6.14.13
OS: win32 x64

Angular: 12.0.3
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.3
@angular-devkit/build-angular   12.0.3
@angular-devkit/core            12.0.3
@angular-devkit/schematics      12.0.3
@angular/flex-layout            12.0.0-beta.34
@schematics/angular             12.0.3
rxjs                            6.6.7
typescript                      4.2.4

I installed the sass npm package npm install -g sass

My styles.scss is like this :

@use '~@angular/material' as mat;
@include mat.core();
$custom-theme-primary: mat.define-palette(mat.$blue-palette, 500, 500, 500);
$custom-theme-accent:  mat.define-palette(mat.$orange-palette, A200, A100, A400);
$custom-theme-warn:    mat.define-palette(mat.$red-palette);
$custom-theme: mat.define-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
@include mat.all-component-themes($custom-theme);

And my angular.json is like this :

"projects": {
    "myAngularProject": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/myAngularProject",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/environments"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },

I followed this guideline angular material

Please can you tell me what am i missing?

Thank you.

[mlc-mlapis]

@leylita Is that on the 52nd-row line -> 52 │ @use '~@angular/material' as mat;?

[leylita]

Yes. I have others CSS properties before.
Should i put this block at the start of the styles.scss file?

@use '~@angular/material' as mat;
@include mat.core();
$custom-theme-primary: mat.define-palette(mat.$blue-palette, 500, 500, 500);
$custom-theme-accent:  mat.define-palette(mat.$orange-palette, A200, A100, A400);
$custom-theme-warn:    mat.define-palette(mat.$red-palette);
$custom-theme: mat.define-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
@include `mat.all-component-themes($custom-theme);

I didn't try this. I don't know if it can fix my problem.

[mlc-mlapis]

@leylita Yes. @forward and @use should be at the beginning of the file.

The following block can be probably placed independently by the internal order logic of styles.

@include mat.core();
$custom-theme-primary: mat.define-palette(mat.$blue-palette, 500, 500, 500);
$custom-theme-accent:  mat.define-palette(mat.$orange-palette, A200, A100, A400);
$custom-theme-warn:    mat.define-palette(mat.$red-palette);
$custom-theme: mat.define-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
@include `mat.all-component-themes($custom-theme);

[leylita]

It solved my problem. Thanks a lot 😃

[daniyal76]

after migrating to angular 12,when i run angular project get this error :

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "@include mat": expected 1 selector or at-rule, was ".core();"
on line 2 of src/styles/variable.scss
from line 1 of src/styles/style.scss

@include mat.core();

[daniyal76]

here is my variable.scss:

@use` '~@angular/material' as mat;
@import '~@angular/material/theming';
@include mat.core();

$bodyfont: 'IRANSans', sans-serif;
$headingfont: 'IRANSans', sans-serif;

$primary: mat.define-palette(mat.$blue-palette, 600);
$accent: mat.define-palette(mat.$indigo-palette, 500);
$warn: mat.define-palette(mat.$pink-palette, 500);
$theme: mat.define-light-theme($primary, $accent, $warn);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);

$custom-typography: mat.get-typography-config(
  $font-family: 'IRANSans, sans-serif'
);```

[Mayankgupta688]

Yes. I have others CSS properties before.
Should i put this block at the start of the styles.scss file?

@use '~@angular/material' as mat;
@include mat.core();
$custom-theme-primary: mat.define-palette(mat.$blue-palette, 500, 500, 500);
$custom-theme-accent:  mat.define-palette(mat.$orange-palette, A200, A100, A400);
$custom-theme-warn:    mat.define-palette(mat.$red-palette);
$custom-theme: mat.define-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
@include `mat.all-component-themes($custom-theme);

I didn't try this. I don't know if it can fix my problem.

Hi, were you able to resolve this issue... I have same problem at my end.