Repository navigation
~ tilde operator not working as expected (and as it did before)聽#14387
Description
馃悶 Bug report
Command (mark with an x)
- [ ] new
- [ ] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc
Is this a regression?
Yes, the previous version in which this bug was not present was: ....Yes. This used to work in cli 1.7.4
Description
A clear and concise description of the problem...In my SCSS files I have something like this:
@import "~scss/some-style";
This code used to look for styles starting from the src folder and worked just fine.
Now I found out that I can use something like this
@import "~src/scss/some-style";
But although my IDE sees the correct path, when I run ng serve I get an error and the compile fails.
馃敩 Minimal Reproduction
To reproduce just put the following line in any component's scss:
@import "~scss/some-style";
Be sure that some-style.scss exists under the src/scss folder
馃敟 Exception or Error
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
@import "~src/scss/some-style";
馃實 Your Environment
Angular CLI: 7.2.2
Node: 10.14.2
OS: win32 x64
Angular: 7.2.2
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.12.4
@angular-devkit/build-angular 0.12.4
@angular-devkit/build-optimizer 0.12.4
@angular-devkit/build-webpack 0.12.4
@angular-devkit/core 7.2.4
@angular-devkit/schematics 7.2.2
@angular/cdk 7.3.7
@angular/flex-layout 7.0.0-beta.19
@angular/material 7.3.7
@ngtools/json-schema 1.1.0
@ngtools/webpack 7.2.4
@schematics/angular 7.2.2
@schematics/update 0.12.2
ng-packagr 4.7.1
rxjs 6.5.1
typescript 3.2.2
webpack 4.28.4
Anything else relevant?
I'm using sass-loader v 7.1.0
may be this lines relevant?
in sass-loader/lib/importsToResolve:
function importsToResolve(url) {
const request = utils.urlToRequest(url);
...
in loader-utils/lib/urlToRequest.js
function urlToRequest(url, root) {
...
if(root !== undefined && root !== false && /^\//.test(url)) {
....
If root was passed
Activity
[-]~ tilde operator doesn't work as expected[/-][+]~ tilde operator not working as expected (and as it did before)[/+]tonysamperi commentedon May 9, 2019
I just noticed that in my
angular.jsonI haveIf I change
rootvalue tosrcI can use in my
scssfiles~scss/some-styleas I did before...But still not working when launching
ng servetonysamperi commentedon May 9, 2019
I think I might have solved the issue and now both the IDE and the cli work as expected.
I can use this import:
@import "~scss/some-style";and it will refer tosrc/scss/some-style.scss.Just not sure if everything's correct:
angular.json:tsconfig.jsonandsrc/tsconfig.app.jsonalan-agius4 commentedon May 13, 2019
Hi @tonysamperi, thanks for reaching out.
The problem with the above is that
sourceRootis not part of the listed modules entrieshttps://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts#L331
That being said, I would strongly advice against using
~especially for local imports, as this is quite a Webpack specific feature and it's not guaranteed that this behaviour will continue to work in the future, there are 2 options which are natively available in sass compiler that one should prefer.@clydin, can you chime in and confirm if we should address the above?
tonysamperi commentedon May 13, 2019
Hi @alan-agius4 thanks for your reply.
I guess the best option is the
stylePreprocessorOptions(as you say, include paths).I'm too lazy!!! :)
Luckily I only have one folder I use this way!
Should I close this issue?
angular-automatic-lock-bot commentedon Sep 9, 2019
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.