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

[goodmite]

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

```Angular CLI: 7.0.7
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)

[goodmite]

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