Does Universal support tilde (~)operator in scss imports?

[sandgupta23]

Bug Report

I created a fresh Angular7 (scss) project with ng new and ran following commands (ref):

ng add @nguniversal/express-engine --clientProject my-project-name
npm run build:ssr && npm run serve:ssr

This enabled server side rendering on port 4000.

Everything fine till this point.

Now I added a main.scss. and then in my app.component.scss, I imported with the tilde syntex as follows:

@import "~src/main.scss";

Now on running npm run build:ssr && npm run serve:ssr I get following error:

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

@import "~src/main.scss";
^
      File to import not found or unreadable: ~src/main.scss.
      in D:\nodebook2\angular-universal-test\src\app\app.component.scss (line 1, column 1)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! angular-universal-test@0.0.0 build:client-and-server-bundles: `ng build --prod && ng run angular-universal-test:server:production

What is the expected behavior?

Universal should be compatible with ~ operator in scss import.

What is the current behavior?

Universal throws error when it sees ~ operator in scss import.

Output from: ng --version.

Node: 8.11.3
OS: win32 x64
Angular: 7.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.7
@angular-devkit/build-angular     0.10.7
@angular-devkit/build-optimizer   0.10.7
@angular-devkit/build-webpack     0.10.7
@angular-devkit/core              7.0.7
@angular-devkit/schematics        7.0.7
@angular/cli                      7.0.7
@ngtools/webpack                  7.0.7
@schematics/angular               7.0.7
@schematics/update                0.10.7
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

[atlmtw]

Did you add scss in your styles preprocessor in your angular.json file? (For your server target build)

[sandgupta23]

It was created by angular cli so, it will be added automatically:

[Tasades]

I have the same issue. I cannot put import with tilde in components scss

[CaerusKaru]

Try to do this without Universal and I think you'll find it's not a Universal problem. If that's the case, please file an issue with sass-loader. If it's not an issue with sass-loader, this still isn't a Universal issue and should be filed with angular-cli.

[Avcajaraville]

@CaerusKaru I'm having exactly the same issue and when I do without Universal, it does works correctly, so maybe its indeed a universal issue?

[bayucandra]

I having the same problem with tilde import. Now removing all tilde works fine. Still expecting Angular Universal support tilde import. It's really handy.

-Using CLI
-Follow official angular universal guide : https://angular.io/guide/universal

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