SASS/SCSS tilde reference no longer works with variables #9061

yogeshgadge · 2018-01-02T17:30:17Z

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

> [email protected] 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.

The text was updated successfully, but these errors were encountered:

clydin · 2018-01-02T17:53:45Z

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 · 2018-01-02T19:01:58Z

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 · 2018-01-02T19:58:20Z

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 · 2018-01-02T22:10:42Z

@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 · 2018-01-02T23:32:34Z

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

clydin · 2018-01-03T01:54:35Z

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.

Ensure that, on Windows, the path doesn't contain back slashes to be PostCSS friendly :) Following angular#8791 Closes angular#9077 angular#9061 angular#9080

angular-automatic-lock-bot · 2019-09-07T19:41:27Z

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

yogeshgadge changed the title ~~SASS/SCSS tilde imports broken~~ SASS/SCSS tilde reference no longer works with variables Jan 2, 2018

filipesilva assigned clydin Jan 3, 2018

filipesilva added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent type: bug/fix labels Jan 3, 2018

clydin mentioned this issue Jan 3, 2018

fix(@angular/cli): ensure stylesheet relative tilde path conversion #9077

Merged

maa105 mentioned this issue Jan 4, 2018

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_ modules/postcss-loader/lib?{"ident":"postcss","plugins":[null,null,null],"source Map":false}!./node_modules/bootstrap/dist/css/bootstrap.css #9080

Closed

douglasduteil mentioned this issue Jan 4, 2018

fix(@angular/cli): Windows friendly tilde path resolution #9087

Closed

clydin closed this as completed in #9077 Jan 4, 2018

yogeshgadge mentioned this issue Jan 5, 2018

Upgrade Angular 5.1.2, Angular 1.6.3, Material 5.0.3 etc US-CBP/ngx-cbp-theme#34

Merged

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019

clydin removed their assignment Jun 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SASS/SCSS tilde reference no longer works with variables #9061

SASS/SCSS tilde reference no longer works with variables #9061

yogeshgadge commented Jan 2, 2018 •

edited

Loading

clydin commented Jan 2, 2018

yogeshgadge commented Jan 2, 2018

clydin commented Jan 2, 2018

yogeshgadge commented Jan 2, 2018 •

edited

Loading

yogeshgadge commented Jan 2, 2018

clydin commented Jan 3, 2018

angular-automatic-lock-bot bot commented Sep 7, 2019

SASS/SCSS tilde reference no longer works with variables #9061

SASS/SCSS tilde reference no longer works with variables #9061

Comments

yogeshgadge commented Jan 2, 2018 • edited Loading

Bug Report or Feature Request (mark with an x)

Versions

Repro steps

Observed behavior

Desired behavior

Mention any other details that might be useful (optional)

clydin commented Jan 2, 2018

yogeshgadge commented Jan 2, 2018

clydin commented Jan 2, 2018

yogeshgadge commented Jan 2, 2018 • edited Loading

Version ~ 1.5.4

Version 1.6.3

yogeshgadge commented Jan 2, 2018

clydin commented Jan 3, 2018

angular-automatic-lock-bot bot commented Sep 7, 2019

yogeshgadge commented Jan 2, 2018 •

edited

Loading

yogeshgadge commented Jan 2, 2018 •

edited

Loading