bug(scss): import paths have changed

[DerYeger]

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

v12

Description

In v12, I used the following import in SCSS files @use "~@angular/material" as mat;.

After migrating to Angular v13, only the following import works @use "@angular/material" as mat;.
However, Webstorm does not recognize the import.

Reproduction

Steps to reproduce:

1. Migrate to Angular (Material) v13
2. Use @use "~@angular/material" as mat;

Expected Behavior

Old imports work as expected.

Actual Behavior

I had to change the import to @use "@angular/material" as mat;, which causes IDE warnings.

Environment

• Angular:
• CDK/Material: 13.0.0
• Browser(s): any
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11, macOS Monterey

[crisbeto]

The tilde imports has been deprecated in the sass-loader for a long time and in v13 we stopped supporting it (see https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules). There was an automated migration that should've removed it for you. Did you update your project using ng update or by bumping the versions in the package.json? Also did you update from 12 to 13 or from an RC version?

[DerYeger]

I see, thank you!

So the Webstorm errors can be ignored, that's good to know.

I migrated from 12.2.12 to 13.0.0 using ng update according to https://update.angular.io.

[russelporosky]

Ignoring the error isn't a good solution since code completion fails as well.

[Airblader]

The WebStorm issues will be resolved soon, see https://youtrack.jetbrains.com/issue/WEB-53312?_ga=2.16688127.810438460.1636730288-874848357.1590392228

[ecruz165]

The WebStorm issues will be resolved soon, see https://youtrack.jetbrains.com/issue/WEB-53312?_ga=2.16688127.810438460.1636730288-874848357.1590392228

Webstorm started recognizing paths after adding the following to angular.json under build

            "stylePreprocessorOptions": {
              "includePaths": [
                "src/styles",
                "node_modules"
              ]
            },

[DerYeger]

It's marked as resolved in WebStorm.

[angular-automatic-lock-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.}