Does Universal support tilde (~)operator in scss imports?
See original GitHub issueBug 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
Issue Analytics
- State:
- Created 5 years ago
- Reactions:3
- Comments:7 (1 by maintainers)
Top Results From Across the Web
sass - Tilde ~ in SCSS @use statement no longer resolving to ...
Officially, as of Angular version 13 the usage of tilde imports won't be supported anymore. Here about the why this is working without...
Read more >Importing scss files using tilde (~) as in webpack to specify a ...
Webpack lets you specify the project's root and then tilde (~) is used to import scss files relative to the root set in...
Read more >Sass: @import
Sass extends CSS's @import rule with the ability to import Sass and CSS stylesheets, providing access to mixins, functions, and variables and combining ......
Read more >Universal selectors - CSS: Cascading Style Sheets | MDN
The universal selector is a special type selector and can therefore be namespaced when using @namespace . This is useful when dealing with ......
Read more >Changelog | Stylelint
Added: support for plugin objects as config values (#6481) (@phoenisx). ... and selector-max-specificity false positives for :is() and :where() (#6131).
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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?
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.