Angular-cli: ~ tilde operator unable to path to scss beneath app/src

[nhhockeyplayer]

its documented that

~ is a quick way to reference root in order to operate paths to scss

https://scotch.io/tutorials/using-sass-with-the-angular-cli

"The tilde (~) will tell Sass to look in the src/ folder and is a quick shortcut to importing Sass files."

I am using latest releases and tilde is hardwired to node_modules dir

here is my source inside scss file

@font-face {
  font-family: "icon";
  src: url('~sass-chart-styles/fonts/icons/icon.eot?240c3b754b3c47134bf4a382f524781b?#iefix') format("embedded-opentype"),
url('~sass-chart-styles/fonts/icons/icon.woff2?240c3b754b3c47134bf4a382f524781b') format("woff2"),
url('~sass-chart-styles/fonts/icons/icon.woff?240c3b754b3c47134bf4a382f524781b') format("woff");
  font-weight: normal;
  font-style: normal;
}

here is output

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./src/sass/index.scss
(Emitted value instead of an instance of Error) CssSyntaxError: C:\apache-tomcat-9.0.0.M17\webapps\ROOT\api\src\sass\fonts\icons.scss:3:7: Can't resolve '.
./../node_modules/sass-chart-styles/fonts/icons/icon.eot' in 'C:\apache-tomcat-9.0.0.M17\webapps\ROOT\api\src\sass'

node_modules is clearly at the root of the tilde reference

why cant I path into my scss source code ?

Angular CLI: 1.7.3
Node: 9.3.0
OS: win32 x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.2.4
@angular/cli: 1.7.3
@angular/flex-layout: 5.0.0-beta.13
@angular/material: 5.2.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 3.11.0

[nhhockeyplayer]

chose not to use ~

[inorganik]

I am curious why the tilde shortcut stopped linking to the sass folder also. I have an older project created with version 1.6.3 of the CLI, and the tilde still works for pointing to both the node_modules folder and my sass folder, from .scss files throughout my project, even after upgrading everything to 6.0.

I created a new project with 6.0 and it no longer works. I can't find anything in angular.json or tsconfig.json in the older project that is making it work.

@nhhockeyplayer can you please re-open this so that someone on the CLI team can determine if this is a bug or not?

Thanks!

[goodmite]

@inorganik I am puzzled as to why did @nhhockeyplayer closed this bug? Its a bug, no matter if he/she chose to use ~ or not. Weird.
@inorganik figured that you can use ~src instead of ~

[tonysamperi]

I'm using @angular/cli 7.2.2 and ~src doesn't seem to work either.
Is there a way to do this??

[inorganik]

I discovered it works if you do 2 things:

1. include the extension in the import (whereas normally with scss imports you don't need the extension).
2. make sure the file name is _not_ prefixed with an underscore (whereas usually you prefix partials with an underscore.)

So this works:

✅ @import '~scss/variables.scss';

Doesn't work:

⛔️@import '~scss/variables';

Note that scss files in node_modules are allowed to be prefixed and don’t need the extension. ¯_(ツ)_/¯

[tonysamperi]

thanks for your reply, @inorganik .

Unfortunately, still no joy!

⛔️@import "~scss/variables";
⛔️@import "~src/scss/variables";
⛔️@import "~scss/variables.scss";
⛔️@import "~src/scss/variables.scss";

Can I ask you which version of cli do you use?

I'd like to point out that
@import "~src/scss/variables.scss";
and
@import "~src/scss/variables";
work just fine in the IDE: if I ctrl+click, I get to the file!
It's just in the ng serve that something is wrong!

[tonysamperi]

Anyway I created a new issue #14387 because I believe this is still a bug

[tonysamperi]

I solved it.
Both the IDE and the cli work as expected.
I can now use this import: @import "~scss/some-style"; and it will refer to src/scss/some-style.scss.
For anyone who may encounter this, check your angular.json and tsconfig.json
I set mine this way. In angular.json:

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

in my tsconfig.json and src/tsconfig.app.json

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

[inorganik]

@tonysamperi simply changing root's value to "src" made it work for me. 🎉

Although, it's a little concerning that ng new doesn't initialize it this way to begin with. What other implications could changing that have. I did a prod build and it worked fine. The docs simply describe it as

The root folder for this project's files, relative to the workspace folder. Empty for the initial app, which resides at the top level of the workspace.

[tonysamperi]

@inorganik I tried that but my IDE wouldn't recognize the paths, until I changed the tsconfig!
Maybe it was a coincidence...
Tomorrow I'll check again!
Thanks for your support!

[swirlsky]

Using @import "~foo.scss"; in Angular 8 in any of my scss files will import foo.scss which is located in my src folder. Just wanted to confirm that for me it works.

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