help(Upgrade): Unable to finish upgrade from 12 to 13 due to scss issues

[HarelM]

trafficstars

Is this a regression?

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

The previous version in which this bug was not present was

12

Description

When upgrading from angular 12 to angular 13 of the material library the upgrade completes successfully but the build fails with cryptic error message.

Reproduction

Steps to reproduce:

1. clone https://github.com/IsraelHikingMap/Site
2. cd IsraelHiking.Web
3. upgrade angular from 12 to 13
4. upgrade material from 12 to 13
5. run npm run build:watch
6. Build fails with the following error message:

SassError: expected "{".
  ╷
1 │ @use "@angular/material" as mat;
  │                                  ^
  ╵
  src/scss/sidebar.scss 1:34  @import
  src/scss/common.scss 6:9    root stylesheet

Expected Behavior

Upgrade should complete successfully and build should pass.

Actual Behavior

Unable to use material 13 due to this cryptic error which I haven't found a way to workaround or fix.

Environment

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

[HarelM]

I've pushed the upgrade I did besides material 12->13 to the following branch. Feel free to try and upgrade only material and then build to see the error: https://github.com/IsraelHikingMap/Site/tree/maplibre2

[crisbeto]

Based on the stack trace, I'm guessing that you're either running an old version of Sass that doesn't support @use or you're running node-sass which is unsupported.

[HarelM]

I already am using @use in my project, the upgrade changed from using ~@angular... to @angular. I might be using an old version of Sass, but shouldn't the upgrade take care of this? I'm using angular for a long time (since version 2 I think with this project) and I try my best to upgrade only using the supplied tools. If there's something I should be doing differently I'd love to know :-)

[crisbeto]

The tilde before imports has been deprecated in the CSS Webpack loader for a long time. We removed it automatically in v13, because it would've conflicted with the new Angular package format as well. You can try this as well https://github.com/angular/components/issues/23961#issuecomment-981098409

[HarelM]

Thanks @crisbeto ! I'll try it although I don't have high expectations... I'm mainly concerned about the following file which I'm not sure how to migrate so that it will be valid in angular 13:

@use "~@angular/material" as mat;
@import "../fonts/icons.css";
@import "font-awesome/css/font-awesome.css";
@import "~maplibre-gl/dist/maplibre-gl.css";
@import "./dialogs.scss";
@import "./sidebar.scss";
@import "./_variables.scss";

@include mat.core();
@include mat.all-component-themes($app-theme);

html {
    height: 100%;
}
...

Can be found here: https://github.com/IsraelHikingMap/Site/blob/main/IsraelHiking.Web/src/scss/common.scss

[crisbeto]

The only required change in that file should be to remove the tilde from the @angular/material import. I noticed that some of the other files import from Material so they'll have to be updated as well.

[HarelM]

Yes. This is what the upgrade does, it removes the tilde from all the relevant files.

[HarelM]

Any update on this? Is there more information needed in order to reproduce the issue?

[andrewseguin]

It sounds like you just need to remove the tilde to fix the build issue. Was there something blocking that?

[HarelM]

After removing the tilde I'm getting this error... :-(

[HarelM]

Here are the steps again, I already upgraded to angular 13 but not to material 13 due to this issue:

1. Clone https://github.com/IsraelHikingMap/Site
2. cd IsraelHiking.Web
3. npm install
4. npx ng update @angular/material@13 @angular/cdk@13 @angular/flex-layout
5. npm run build:watch

I get the following frightening messages:

./src/scss/common.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/scss/common.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ @use "@angular/material" as mat;
  │                                  ^
  ╵
  src/scss/sidebar.scss 1:34  @import
  src/scss/common.scss 6:9    root stylesheet

./src/scss/common.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ @use "@angular/material" as mat;
  │                                  ^
  ╵
  src/scss/sidebar.scss 1:34  @import
  src/scss/common.scss 6:9    root stylesheet
    at tryRunOrWebpackError (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:4979:12)
    at __webpack_require__ (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:4936:18)
    at /Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:5007:20
    at symbolIterator (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:3485:9)
    at done (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:4914:43
    at symbolIterator (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:3482:9)
    at timesSync (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:3463:5)
    at /Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:4879:16
    at symbolIterator (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:3485:9)
    at timesSync (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:3463:5)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ @use "@angular/material" as mat;
  │                                  ^
  ╵
  src/scss/sidebar.scss 1:34  @import
  src/scss/common.scss 6:9    root stylesheet
    at Object.<anonymous> (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!/Users/harel/IHM/Site/IsraelHiking.Web/src/scss/common.scss:1:7)
    at /Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/tapable/lib/Hook.js:14:14)
    at /Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:4981:39
    at tryRunOrWebpackError (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:4979:12)
    at __webpack_require__ (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:4936:18)
    at /Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:5007:20
    at symbolIterator (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:3485:9)
    at done (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:4914:43
    at symbolIterator (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:3482:9)
    at timesSync (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:2297:7)

Generated code for /Users/harel/IHM/Site/IsraelHiking.Web/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!/Users/harel/IHM/Site/IsraelHiking.Web/src/scss/common.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: expected \"{\".\n  ╷\n1 │ @use \"@angular/material\" as mat;\n  │                                  ^\n  ╵\n  src/scss/sidebar.scss 1:34  @import\n  src/scss/common.scss 6:9    root stylesheet");

./src/application/components/location.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ @use "@angular/material" as mat;
  │                                  ^
  ╵
  src/scss/_variables.scss 1:34                           @import
  src/application/components/location.component.scss 2:9  root stylesheet

./src/application/components/main-menu.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ @use "@angular/material" as mat;
  │                                  ^
  ╵
  src/scss/_variables.scss 1:34                            @import
  src/application/components/main-menu.component.scss 1:9  root stylesheet

./src/application/components/map/main-map.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ @use "@angular/material" as mat;
  │                                  ^
  ╵
  src/scss/_variables.scss 1:34                               @import
  src/application/components/map/main-map.component.scss 1:9  root stylesheet

./src/application/components/route-statistics.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ @use "@angular/material" as mat;
  │                                  ^
  ╵
  src/scss/_variables.scss 1:34                                   @import
  src/application/components/route-statistics.component.scss 1:9  root stylesheet

./src/application/components/sidebar/layers-sidebar.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ @use "@angular/material" as mat;
  │                                  ^
  ╵
  src/scss/_variables.scss 1:34                                         @import
  src/application/components/sidebar/layers-sidebar.component.scss 2:9  root stylesheet


✔ Browser application bundle generation complete.

./src/scss/common.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/scss/common.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ @use "@angular/material" as mat;
  │                                  ^
  ╵
  src/scss/sidebar.scss 1:34  @import
  src/scss/common.scss 6:9    root stylesheet

./src/scss/common.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ @use "@angular/material" as mat;
  │                                  ^
  ╵
  src/scss/sidebar.scss 1:34  @import
  src/scss/common.scss 6:9    root stylesheet
    at tryRunOrWebpackError (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:4979:12)
    at __webpack_require__ (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:4936:18)
    at /Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:5007:20
    at symbolIterator (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:3485:9)
    at done (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:4914:43
    at symbolIterator (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:3482:9)
    at timesSync (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:3463:5)
    at /Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:4879:16
    at symbolIterator (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:3485:9)
    at timesSync (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:3463:5)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ @use "@angular/material" as mat;
  │                                  ^
  ╵
  src/scss/sidebar.scss 1:34  @import
  src/scss/common.scss 6:9    root stylesheet
    at Object.<anonymous> (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!/Users/harel/IHM/Site/IsraelHiking.Web/src/scss/common.scss:1:7)
    at /Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/tapable/lib/Hook.js:14:14)
    at /Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:4981:39
    at tryRunOrWebpackError (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:4979:12)
    at __webpack_require__ (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:4936:18)
    at /Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:5007:20
    at symbolIterator (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:3485:9)
    at done (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/harel/IHM/Site/IsraelHiking.Web/node_modules/webpack/lib/Compilation.js:4914:43
    at symbolIterator (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:3482:9)
    at timesSync (/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/neo-async/async.js:2297:7)

Generated code for /Users/harel/IHM/Site/IsraelHiking.Web/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!/Users/harel/IHM/Site/IsraelHiking.Web/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!/Users/harel/IHM/Site/IsraelHiking.Web/src/scss/common.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: expected \"{\".\n  ╷\n1 │ @use \"@angular/material\" as mat;\n  │                                  ^\n  ╵\n  src/scss/sidebar.scss 1:34  @import\n  src/scss/common.scss 6:9    root stylesheet");

./src/application/components/main-menu.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ @use "@angular/material" as mat;
  │                                  ^
  ╵
  src/scss/_variables.scss 1:34                            @import
  src/application/components/main-menu.component.scss 1:9  root stylesheet

./src/application/components/map/main-map.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ @use "@angular/material" as mat;
  │                                  ^
  ╵
  src/scss/_variables.scss 1:34                               @import
  src/application/components/map/main-map.component.scss 1:9  root stylesheet

./src/application/components/route-statistics.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ @use "@angular/material" as mat;
  │                                  ^
  ╵
  src/scss/_variables.scss 1:34                                   @import
  src/application/components/route-statistics.component.scss 1:9  root stylesheet

./src/application/components/sidebar/layers-sidebar.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ @use "@angular/material" as mat;
  │                                  ^
  ╵
  src/scss/_variables.scss 1:34                                         @import
  src/application/components/sidebar/layers-sidebar.component.scss 2:9  root stylesheet

./src/application/components/location.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ @use "@angular/material" as mat;
  │                                  ^
  ╵
  src/scss/_variables.scss 1:34                           @import
  src/application/components/location.component.scss 2:9  root stylesheet

[timothy-pang]

Any update about this issue?

[HarelM]

I'm still stuck with material 12 due to this issue, I have not found a solution unfortunately...

[tim99919]

Have same problem

[wbartussek]

Same problem here. Stuck with this since two days.

[ezouras]

did anyone find a solution to this?

[geniy21]

We are facing the same issue and no luck to find a workaround :(

[HarelM]

@andrewseguin @crisbeto anything else I can try? Angular 14 had just came out and I really don't want to be stuck with material 12 going forward...

[HarelM]

I've tried removing node-sass using uninstall. no luck. I've tried updating the browserlist file, no luck. I've tried to follow the following SO solution, no luck... :-( https://stackoverflow.com/questions/70673661/after-upgrading-npm-package-of-angular-app-sass-loader-does-not-work-anymore https://stackoverflow.com/questions/67527236/angular-material-sasserror-invalid-css-after-include-mat-expected-1-select https://stackoverflow.com/questions/70058183/cant-use-sass-variables-in-angular-from-global-file-despite-other-styles-worki I'm not sure what else to try honestly...

[crisbeto]

@HarelM I spent some time debugging your repo again and it looks like it has nothing to do with Material or with Angular at all. You're getting the errors, because all the .scss files are saved as UTF-8 with BOM which is throwing off the Sass compiler. Note how all the error messages are pointing to an invisible character after the line of code, not the actual code. To fix it, you have to go through all your .scss files and save them as UTF-8 instead. I fixed it with vscode by clicking the "UTF-8 with BOM" label in the bottom right, then selecting "Save with encoding" and changing it to "UTF-8".

[HarelM]

@crisbeto thanks a lot for taking the time to look into my repo! I truly appreciate it. I managed to update to latest angular and material by removing the variables file and duplicating the code (i.e, not import any file from another file), which is basically forfeiting the good part of scss. I'll try the BOM stuff and report back if it helped. Thanks again! Do you think I should open an issue somewhere else in order for other no to experience this issue? The bottom line is that only when I change the material version from 12 to 13 I experience this issue, so I don't know how to track this better in terms of what caused this error... If you understand why the migration caused this than I'll be happy if you could share so I'll better understand the ecosystem...

[crisbeto]

I think that the BOM has been there all along, but combination of the new @use syntax plus the BOM is throwing off the Sass compiler. Ideally this would be fixed in Sass, but that may take a while. We've run into a similar issue with TS-based migrations before and we have some logic to strip it from all files that we migrate. This wasn't handled by our workaround, because Sass-based migrations run through a separate code path that is basic string manipulation.

[crisbeto]

I've sent out #25364 to handle it, but it'll only apply to future migrations.

[HarelM]

Thanks!! I've changed the code to utf-8 and it worked!! Feel free to close this issue as I see the PR you did to solve this in the future. Keep up the good work!

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