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

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

[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]

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.