~ tilde operator not working as expected (and as it did before)

[tonysamperi]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [ ] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: ....

Yes. This used to work in cli 1.7.4

Description

A clear and concise description of the problem...

In my SCSS files I have something like this:

@import "~scss/some-style";

This code used to look for styles starting from the src folder and worked just fine.
Now I found out that I can use something like this

@import "~src/scss/some-style";

But although my IDE sees the correct path, when I run ng serve I get an error and the compile fails.

🔬 Minimal Reproduction

To reproduce just put the following line in any component's scss:

@import "~scss/some-style";

Be sure that some-style.scss exists under the src/scss folder

🔥 Exception or Error

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import "~src/scss/some-style";

🌍 Your Environment

Angular CLI: 7.2.2
Node: 10.14.2
OS: win32 x64
Angular: 7.2.2
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.4
@angular-devkit/build-angular     0.12.4
@angular-devkit/build-optimizer   0.12.4
@angular-devkit/build-webpack     0.12.4
@angular-devkit/core              7.2.4
@angular-devkit/schematics        7.2.2
@angular/cdk                      7.3.7
@angular/flex-layout              7.0.0-beta.19
@angular/material                 7.3.7
@ngtools/json-schema              1.1.0
@ngtools/webpack                  7.2.4
@schematics/angular               7.2.2
@schematics/update                0.12.2
ng-packagr                        4.7.1
rxjs                              6.5.1
typescript                        3.2.2
webpack                           4.28.4

Anything else relevant?

I'm using sass-loader v 7.1.0
may be this lines relevant?

in sass-loader/lib/importsToResolve:

function importsToResolve(url) {
    const request = utils.urlToRequest(url);
    ...

in loader-utils/lib/urlToRequest.js

function urlToRequest(url, root) {
    ...
    if(root !== undefined && root !== false && /^\//.test(url)) {
    ....

If root was passed

[tonysamperi]

I just noticed that in my angular.json I have

    "my-project": {
      "root": "",
      ...
    }

If I change root value to src
I can use in my scss files ~scss/some-style as I did before...
But still not working when launching ng serve

[tonysamperi]

I think I might have solved the issue and now both the IDE and the cli work as expected.
I can use this import: @import "~scss/some-style"; and it will refer to src/scss/some-style.scss.
Just not sure if everything's correct:

angular.json:

...
"root": "src",
"sourceRoot": "src",
....

tsconfig.json and src/tsconfig.app.json

...
"compilerOptions": {
    "baseUrl": "",
      ...
}
....

[alan-agius4]

Hi @tonysamperi, thanks for reaching out.

The problem with the above is that sourceRoot is not part of the listed modules entries
https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts#L331

That being said, I would strongly advice against using ~ especially for local imports, as this is quite a Webpack specific feature and it's not guaranteed that this behaviour will continue to work in the future, there are 2 options which are natively available in sass compiler that one should prefer.

1. Relative paths
2. Include paths

@clydin, can you chime in and confirm if we should address the above?

[tonysamperi]

Hi @alan-agius4 thanks for your reply.
I guess the best option is the stylePreprocessorOptions (as you say, include paths).
I'm too lazy!!! :)
Luckily I only have one folder I use this way!
Should I close this issue?

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