Does Angular Cli 6 support @import ~ anymore?

[dereklin]

I just create a brand new app with angular cli 6. I tried use do

@import '~styles/variables';

But I got file not found error.

Here is my code:

https://stackblitz.com/github/dereklin/myng6app?file=src%2Fapp%2Fapp.component.scss

Is @import ~ no longer supported?

[LeoUrzua]

Rename the file from "/src/styles/_variables.scss" to "/src/styles/variables.scss"

"import" is part of typescript and angular 6 implements typescript

[dereklin]

That's interesting. While stackblitz appears to work, running ng serve locally still produces the same error after change the file name:

ERROR in ./src/app/app.component.scss
Module build failed: 
@import '~styles/variables';
^
      File to import not found or unreadable: ~styles/variables.
      in /Users/delin/sandbox/myng6app/src/app/app.component.scss (line 1, column 1)
ℹ ｢wdm｣: Failed to compile.

Here is my repo: https://github.com/dereklin/myng6app

On another note, stackblitz seems to cache my old app. When I do https://stackblitz.com/github/dereklin/myng6app, I can still see _variables.scss instead of the newly named variable.scss.

But I really think _variables.scss is the right file name since they are partials and I don't want sass to compile them: https://kolosek.com/sass-import/

[LeoUrzua]

Change the app.component.scss to

@import '../../styles/variables

and name the variables file as "_variables.scss"

[dereklin]

But that's relative import. My original question is regarding the support of @import ~. It used to work before my upgrading to Angular 6. Some claim it's still working (storybookjs/storybook#3814). I want to find out if it's indeed supported still.

[VitalDoVilmate]

Did you find the way how to solve the issue?

[clydin]

The usage of the tilde was/is not officially supported and is actual an artifact of the internal implementation of the build system. While it may currently work in certain situations, it is not guaranteed to continue to function in the future. In the style use cases outlined above, a relative path or the use of the includePaths option (more details) is recommended.

[NickLanam]

@clydin Is this a change of stance? On #9166 and #9184 (back in January), you noted that this syntax being unsupported was a defect. It also appears that there are unit tests in 6.0.x that check if tilde imports work.

Has something changed in policy?

EDIT: For what it's worth, I'm seeing the same behavior in a fresh v6 project using LESS, so the symptom isn't unique to SCSS.

[clydin]

The Angular Material documentation contained a usage of the tilde and to prevent wide spread breakage a set of tests for a limited usage of the tilde were added at that time. These tests were carried over into 6.x to attempt to ease transition. However, there is currently not a guarantee that the tilde will continue to function (even in the tested limited capacity) moving into the future.

[NickLanam]

@clydin I see. Given that this functionality happens to work sometimes (despite not being intentionally supported), what sort of work do you think it would take to make it intentionally supported? I'd be interested in taking a stab at it if it's not too hairy. It's quite a handy thing to have, after all.

[damienwebdev]

@NickLanam I've proposed an idea that may solve this issue in #12573. Let me know if that would handle your use-case, especially if @clydin is unwilling to commit to supporting ~ this may be a feasible alternative.

[NickLanam]

@damienwebdev That proposal would add a fair bit of flexibility, but I'm not sure that it achieves the same use case. In the issue here, a working implementation avoids the need for manually specifying where to find each thing. It defaults to finding node_modules (no matter how deep in the tree the file you're working on might be).

[Albejr]

In my case (Angular 7):

angular.json

"projects": {
    "MyProject": {
      "sourceRoot": "src"
}}

styles.scss
@import "assets/css/variables.scss";