help(Upgrade): Unable to finish upgrade from 12 to 13 due to scss issues #24227
Comments
|
I've pushed the upgrade I did besides material 12->13 to the following branch. |
|
Based on the stack trace, I'm guessing that you're either running an old version of Sass that doesn't support |
|
I already am using |
|
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 #23961 (comment) |
|
Thanks @crisbeto ! I'll try it although I don't have high expectations... @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: |
|
The only required change in that file should be to remove the tilde from the |
|
Yes. This is what the upgrade does, it removes the tilde from all the relevant files. |
|
Any update on this? Is there more information needed in order to reproduce the issue? |
|
It sounds like you just need to remove the tilde to fix the build issue. Was there something blocking that? |
andrewseguin
added
the
needs: clarification
|
After removing the tilde I'm getting this error... :-( |
|
Here are the steps again, I already upgraded to angular 13 but not to material 13 due to this issue:
I get the following frightening messages: |
|
Any update about this issue? |
|
I'm still stuck with material 12 due to this issue, I have not found a solution unfortunately... |
|
Have same problem |
|
Same problem here. Stuck with this since two days. |
|
did anyone find a solution to this? |
|
We are facing the same issue and no luck to find a workaround :( |
|
@andrewseguin @crisbeto anything else I can try? |
|
I've tried removing node-sass using uninstall. no luck. |
|
@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". |
|
@crisbeto thanks a lot for taking the time to look into my repo! I truly appreciate it. |
|
I think that the BOM has been there all along, but combination of the new |
We have some code to strip BOM from TS files when running a migration, but it doesn't apply to migrations of Sass files. These changes reuse the same code for Sass migrations, because the BOM can cause errors in the Sass compiler (see angular#24227 (comment)).
|
I've sent out #25364 to handle it, but it'll only apply to future migrations. |
We have some code to strip BOM from TS files when running a migration, but it doesn't apply to migrations of Sass files. These changes reuse the same code for Sass migrations, because the BOM can cause errors in the Sass compiler (see angular#24227 (comment)).
We have some code to strip BOM from TS files when running a migration, but it doesn't apply to migrations of Sass files. These changes reuse the same code for Sass migrations, because the BOM can cause errors in the Sass compiler (see angular#24227 (comment)).
We have some code to strip BOM from TS files when running a migration, but it doesn't apply to migrations of Sass files. These changes reuse the same code for Sass migrations, because the BOM can cause errors in the Sass compiler (see #24227 (comment)).
We have some code to strip BOM from TS files when running a migration, but it doesn't apply to migrations of Sass files. These changes reuse the same code for Sass migrations, because the BOM can cause errors in the Sass compiler (see #24227 (comment)). (cherry picked from commit 98ebc70)
We have some code to strip BOM from TS files when running a migration, but it doesn't apply to migrations of Sass files. These changes reuse the same code for Sass migrations, because the BOM can cause errors in the Sass compiler (see #24227 (comment)). (cherry picked from commit 98ebc70)
|
Thanks!! I've changed the code to utf-8 and it worked!! |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Is this a regression?
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:
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
The text was updated successfully, but these errors were encountered: