SASS/SCSS tilde reference no longer works with variables

[yogeshgadge]

Bug Report or Feature Request (mark with an x)

• bug report -> please search issues before submitting

Versions

Angular CLI: 1.6.3
Node: 8.4.0
OS: win32 x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.3
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

Repro steps

Problem is reproduced in https://github.com/yogeshgadge/demo-app2

which involves following simple steps:-

• Create a new project

ng new demo-app2 --style scss

• Install a npm module that exposes scss files (e.g. roboto-fontfacess)

npm install font-awesome --save-dev

• In styles.scss import using tilde.

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome";

Observed behavior

"C:\Users\MYUSER\AppData\Roaming\JetBrains\WebStorm 2017.2.5\bin\runnerw.exe" C:\tools\Node84\node.exe C:\tools\Node84\node_modules\npm\bin\npm-cli.js run build --scripts-prepend-node-path=auto

> demo-app2@0.0.0 build C:\Users\MYUSER\projs\github\junk\demo-app2
> ng build --prod

Date: 2018-01-02T17:26:04.953Z
Hash: bfab181eadee771e9f9b
Time: 15802ms
chunk {0} polyfills.61df7d7ec492d95bb0b2.bundle.js (polyfills) 61.3 kB [initial] [rendered]
chunk {1} main.7e18996fef53ed99d910.bundle.js (main) 152 kB [initial] [rendered]
chunk {2}  (styles) [initial] [rendered]
chunk {3} inline.76a9d11626e627098224.bundle.js (inline) 1.45 kB [entry] [rendered]

WARNING in ./src/styles.scss
(Emitted value instead of an instance of Error) postcss-url: C:\Users\MYUSER\projs\github\junk\demo-app2\src\styles.scss:11:3: Can't read file 'C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.eot', ignoring
NonErrorEmittedError: (Emitted value instead of an instance of Error) postcss-url: C:\Users\MYUSER\projs\github\junk\demo-app2\src\styles.scss:11:3: Can't read file 'C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.eot', ignoring
    at Object.emitWarning (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\webpack\lib\NormalModule.js:117:16)
    at result.warnings.forEach (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\postcss-loader\lib\index.js:149:49)
    at Array.forEach (<anonymous>)
    at postcss.process.then (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\postcss-loader\lib\index.js:149:27)
    at <anonymous>
 @ multi ./src/styles.scss

WARNING in ./src/styles.scss
(Emitted value instead of an instance of Error) postcss-url: C:\Users\MYUSER\projs\github\junk\demo-app2\src\styles.scss:12:3: Can't read file 'C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.ttf', ignoring
NonErrorEmittedError: (Emitted value instead of an instance of Error) postcss-url: C:\Users\MYUSER\projs\github\junk\demo-app2\src\styles.scss:12:3: Can't read file 'C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.ttf', ignoring
    at Object.emitWarning (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\webpack\lib\NormalModule.js:117:16)
    at result.warnings.forEach (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\postcss-loader\lib\index.js:149:49)
    at Array.forEach (<anonymous>)
    at postcss.process.then (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\postcss-loader\lib\index.js:149:27)
    at <anonymous>
 @ multi ./src/styles.scss

WARNING in ./src/styles.scss
(Emitted value instead of an instance of Error) postcss-url: C:\Users\MYUSER\projs\github\junk\demo-app2\src\styles.scss:12:3: Can't read file 'C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff', ignoring
NonErrorEmittedError: (Emitted value instead of an instance of Error) postcss-url: C:\Users\MYUSER\projs\github\junk\demo-app2\src\styles.scss:12:3: Can't read file 'C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff', ignoring
    at Object.emitWarning (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\webpack\lib\NormalModule.js:117:16)
    at result.warnings.forEach (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\postcss-loader\lib\index.js:149:49)
    at Array.forEach (<anonymous>)
    at postcss.process.then (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\postcss-loader\lib\index.js:149:27)
    at <anonymous>
 @ multi ./src/styles.scss

WARNING in ./src/styles.scss
(Emitted value instead of an instance of Error) postcss-url: C:\Users\MYUSER\projs\github\junk\demo-app2\src\styles.scss:12:3: Can't read file 'C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff2', ignoring
NonErrorEmittedError: (Emitted value instead of an instance of Error) postcss-url: C:\Users\MYUSER\projs\github\junk\demo-app2\src\styles.scss:12:3: Can't read file 'C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff2', ignoring
    at Object.emitWarning (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\webpack\lib\NormalModule.js:117:16)
    at result.warnings.forEach (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\postcss-loader\lib\index.js:149:49)
    at Array.forEach (<anonymous>)
    at postcss.process.then (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\postcss-loader\lib\index.js:149:27)
    at <anonymous>
 @ multi ./src/styles.scss

WARNING in ./src/styles.scss
(Emitted value instead of an instance of Error) postcss-url: C:\Users\MYUSER\projs\github\junk\demo-app2\src\styles.scss:4:3: Can't read file 'C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.eot', ignoring
NonErrorEmittedError: (Emitted value instead of an instance of Error) postcss-url: C:\Users\MYUSER\projs\github\junk\demo-app2\src\styles.scss:4:3: Can't read file 'C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.eot', ignoring
    at Object.emitWarning (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\webpack\lib\NormalModule.js:117:16)
    at result.warnings.forEach (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\postcss-loader\lib\index.js:149:49)
    at Array.forEach (<anonymous>)
    at postcss.process.then (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\postcss-loader\lib\index.js:149:27)
    at <anonymous>
 @ multi ./src/styles.scss

WARNING in ./src/styles.scss
(Emitted value instead of an instance of Error) postcss-url: C:\Users\MYUSER\projs\github\junk\demo-app2\src\styles.scss:5:3: Can't read file 'C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.ttf', ignoring
NonErrorEmittedError: (Emitted value instead of an instance of Error) postcss-url: C:\Users\MYUSER\projs\github\junk\demo-app2\src\styles.scss:5:3: Can't read file 'C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.ttf', ignoring
    at Object.emitWarning (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\webpack\lib\NormalModule.js:117:16)
    at result.warnings.forEach (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\postcss-loader\lib\index.js:149:49)
    at Array.forEach (<anonymous>)
    at postcss.process.then (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\postcss-loader\lib\index.js:149:27)
    at <anonymous>
 @ multi ./src/styles.scss

WARNING in ./src/styles.scss
(Emitted value instead of an instance of Error) postcss-url: C:\Users\MYUSER\projs\github\junk\demo-app2\src\styles.scss:5:3: Can't read file 'C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff', ignoring
NonErrorEmittedError: (Emitted value instead of an instance of Error) postcss-url: C:\Users\MYUSER\projs\github\junk\demo-app2\src\styles.scss:5:3: Can't read file 'C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff', ignoring
    at Object.emitWarning (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\webpack\lib\NormalModule.js:117:16)
    at result.warnings.forEach (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\postcss-loader\lib\index.js:149:49)
    at Array.forEach (<anonymous>)
    at postcss.process.then (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\postcss-loader\lib\index.js:149:27)
    at <anonymous>
 @ multi ./src/styles.scss

WARNING in ./src/styles.scss
(Emitted value instead of an instance of Error) postcss-url: C:\Users\MYUSER\projs\github\junk\demo-app2\src\styles.scss:5:3: Can't read file 'C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff2', ignoring
NonErrorEmittedError: (Emitted value instead of an instance of Error) postcss-url: C:\Users\MYUSER\projs\github\junk\demo-app2\src\styles.scss:5:3: Can't read file 'C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff2', ignoring
    at Object.emitWarning (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\webpack\lib\NormalModule.js:117:16)
    at result.warnings.forEach (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\postcss-loader\lib\index.js:149:49)
    at Array.forEach (<anonymous>)
    at postcss.process.then (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\postcss-loader\lib\index.js:149:27)
    at <anonymous>
 @ multi ./src/styles.scss

ERROR in ./src/styles.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../../../fonts/roboto/Roboto-Bold.eot' in 'C:\Users\MYUSER\projs\github\junk\demo-app2\src'
    at factoryCallback (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\webpack\lib\Compilation.js:276:40)
    at factory (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\webpack\lib\NormalModuleFactory.js:235:20)
    at resolver (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\webpack\lib\NormalModuleFactory.js:60:20)
    at asyncLib.parallel (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\webpack\lib\NormalModuleFactory.js:127:20)
    at C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\async\dist\async.js:3874:9
    at C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\async\dist\async.js:473:16
    at iteratorCallback (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\async\dist\async.js:1048:13)
    at C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\async\dist\async.js:958:16
    at C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\async\dist\async.js:3871:13
    at resolvers.normal.resolve (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\webpack\lib\NormalModuleFactory.js:119:22)
    at onError (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\enhanced-resolve\lib\Resolver.js:65:10)
    at loggingCallbackWrapper (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at runAfter (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\enhanced-resolve\lib\Resolver.js:158:4)
    at innerCallback (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\enhanced-resolve\lib\Resolver.js:146:3)
    at loggingCallbackWrapper (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at next (C:\Users\MYUSER\projs\github\junk\demo-app2\node_modules\tapable\lib\Tapable.js:252:11)
 @ ./src/styles.scss
 @ multi ./src/styles.scss
ERROR in ./src/styles.scss
Module not found: Error: Can't resolve '../../../fonts/roboto/Roboto-Bold.eot' in 'C:\Users\MYUSER\projs\github\junk\demo-app2\src'
resolve '../../../fonts/roboto/Roboto-Bold.eot' in 'C:\Users\MYUSER\projs\github\junk\demo-app2\src'
  using description file: C:\Users\MYUSER\projs\github\junk\demo-app2\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\Users\MYUSER\projs\github\junk\demo-app2\package.json (relative path: ./src)
    No description file found
    no extension
      Field 'browser' doesn't contain a valid alias configuration
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.eot doesn't exist
    .ts
      Field 'browser' doesn't contain a valid alias configuration
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.eot.ts doesn't exist
    .js
      Field 'browser' doesn't contain a valid alias configuration
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.eot.js doesn't exist
    as directory
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.eot doesn't exist
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.eot\package.json]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.eot]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.eot.ts]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.eot.js]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.eot]
 @ ./src/styles.scss 6:147-195 6:259-307 6:761-809 6:873-921
 @ multi ./src/styles.scss
ERROR in ./src/styles.scss
Module not found: Error: Can't resolve '../../../fonts/roboto/Roboto-Bold.svg' in 'C:\Users\MYUSER\projs\github\junk\demo-app2\src'
resolve '../../../fonts/roboto/Roboto-Bold.svg' in 'C:\Users\MYUSER\projs\github\junk\demo-app2\src'
  using description file: C:\Users\MYUSER\projs\github\junk\demo-app2\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\Users\MYUSER\projs\github\junk\demo-app2\package.json (relative path: ./src)
    No description file found
    no extension
      Field 'browser' doesn't contain a valid alias configuration
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.svg doesn't exist
    .ts
      Field 'browser' doesn't contain a valid alias configuration
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.svg.ts doesn't exist
    .js
      Field 'browser' doesn't contain a valid alias configuration
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.svg.js doesn't exist
    as directory
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.svg doesn't exist
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.svg\package.json]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.svg]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.svg.ts]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.svg.js]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.svg]
 @ ./src/styles.scss 6:603-651 6:1217-1265
 @ multi ./src/styles.scss
ERROR in ./src/styles.scss
Module not found: Error: Can't resolve '../../../fonts/roboto/Roboto-Bold.ttf' in 'C:\Users\MYUSER\projs\github\junk\demo-app2\src'
resolve '../../../fonts/roboto/Roboto-Bold.ttf' in 'C:\Users\MYUSER\projs\github\junk\demo-app2\src'
  using description file: C:\Users\MYUSER\projs\github\junk\demo-app2\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\Users\MYUSER\projs\github\junk\demo-app2\package.json (relative path: ./src)
    No description file found
    no extension
      Field 'browser' doesn't contain a valid alias configuration
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.ttf doesn't exist
    .ts
      Field 'browser' doesn't contain a valid alias configuration
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.ttf.ts doesn't exist
    .js
      Field 'browser' doesn't contain a valid alias configuration
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.ttf.js doesn't exist
    as directory
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.ttf doesn't exist
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.ttf\package.json]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.ttf]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.ttf.ts]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.ttf.js]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.ttf]
 @ ./src/styles.scss 6:520-568 6:1134-1182
 @ multi ./src/styles.scss
ERROR in ./src/styles.scss
Module not found: Error: Can't resolve '../../../fonts/roboto/Roboto-Bold.woff' in 'C:\Users\MYUSER\projs\github\junk\demo-app2\src'
resolve '../../../fonts/roboto/Roboto-Bold.woff' in 'C:\Users\MYUSER\projs\github\junk\demo-app2\src'
  using description file: C:\Users\MYUSER\projs\github\junk\demo-app2\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\Users\MYUSER\projs\github\junk\demo-app2\package.json (relative path: ./src)
    No description file found
    no extension
      Field 'browser' doesn't contain a valid alias configuration
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff doesn't exist
    .ts
      Field 'browser' doesn't contain a valid alias configuration
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff.ts doesn't exist
    .js
      Field 'browser' doesn't contain a valid alias configuration
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff.js doesn't exist
    as directory
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff doesn't exist
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff\package.json]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff.ts]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff.js]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff]
 @ ./src/styles.scss 6:440-489 6:1054-1103
 @ multi ./src/styles.scss
ERROR in ./src/styles.scss
Module not found: Error: Can't resolve '../../../fonts/roboto/Roboto-Bold.woff2' in 'C:\Users\MYUSER\projs\github\junk\demo-app2\src'
resolve '../../../fonts/roboto/Roboto-Bold.woff2' in 'C:\Users\MYUSER\projs\github\junk\demo-app2\src'
  using description file: C:\Users\MYUSER\projs\github\junk\demo-app2\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\Users\MYUSER\projs\github\junk\demo-app2\package.json (relative path: ./src)
    No description file found
    no extension
      Field 'browser' doesn't contain a valid alias configuration
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff2 doesn't exist
    .ts
      Field 'browser' doesn't contain a valid alias configuration
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff2.ts doesn't exist
    .js
      Field 'browser' doesn't contain a valid alias configuration
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff2.js doesn't exist
    as directory
      C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff2 doesn't exist
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff2\package.json]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff2]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff2.ts]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff2.js]
[C:\Users\MYUSER\projs\github\fonts\roboto\Roboto-Bold.woff2]
 @ ./src/styles.scss 6:358-408 6:972-1022
 @ multi ./src/styles.scss

Desired behavior

There should be no build errors.

Mention any other details that might be useful (optional)

Related to #8791 - It seems this is still broken.

[clydin]

The package needs to be configured similarly to how Font Awesome is used. See this wiki story for details: https://github.com/angular/angular-cli/wiki/stories-include-font-awesome

Alternatively, the stylesheet can be added directly to the styles array of .angular-cli.json.

[yogeshgadge]

I am not sure we should be adding every npm module imports inside .angular-cli.json as per that wiki.

And more over the essence of that Wiki is about Urls like images/fonts that are relative to npm_modules.

I think the font example is confusing people about the problem description. Let me try another example with later.

[clydin]

That's one of the reasons the styles option is an array: To add global stylesheets to the application. styles.css can be eliminated completely if the application has no custom global styles.

The issue is due to relative font URLs. Either set the scss variable from here before import or add it to the styles array.

[yogeshgadge]

@clydin You are right about the path variable.
However the cause of the confusion is the follows:

Version ~ 1.5.4

A tilde in the fa-font-path works fine:

Checkout branch https://github.com/yogeshgadge/demo-app2/tree/tilde-works-in-version-154

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome";

Version 1.6.3

//  This does not work
// $fa-font-path: "~font-awesome/fonts" !default;
// must be relative
$fa-font-path: "../node_modules/font-awesome/fonts" !default;

This is not good for library applications that depend on (say font-awesome) because now that tilde does not work in $fa-font-path it is no longer portable i.e. there has to be a manual step for every application to reset $fa-font-path according to where they are are importing any scss.

One ugly workaround may be to adjust the location of your scss files so that the distance from node_modules to the source is same as the distance in the npm distribution.

My question is why did we take out this functionality/feature?

[yogeshgadge]

I have updated the description in the original issue as per @clydin's insights.

[clydin]

It actually partially works. The tilde is handled but webpack doesn't process a url() with absolute paths so the resources are not being copied. A fix is in the works.