Angular CLI 1.5.x to 1.6.6 breaks build with relative image url ~ *.scss (tilde)

Hi,

[x] Support [x] Potential bug

I’ve googled and searched through a lot of GitHub issues. But can’t find what I’m looking for… so please bear with me 😉

folder structure:

/project/frontend
/project/frontend/src
/project/frontend/dist
/project/frontend/node_modules
/project/frontend/src/app
/project/frontend/src/assets
/project/frontend/src/scss

I want to make a relative path to my image (located in assets) from my stylesheets (located in src/scss)… I used to do:

.server-response-404{
  @include retina-background-image('~assets/images/404', 'jpg');
}

Now with 1.6.6 I can’t use tilde… When I run ‘npm start’ or ‘ng serve’ I get this error

ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/scss/main.scss
Module not found: Error: Can't resolve './assets/images/404.jpg' in '/Users/username/project/frontend/src/scss'
resolve './assets/images/404.jpg' in '/Users/username/project/frontend/src/scss'
  using description file: /Users/username/project/frontend/package.json (relative path: ./src/scss)
    Field 'browser' doesn't contain a valid alias configuration

...
/Users/username/project/frontend/src/scss/assets/images/404.jpg doesn't exist

Question:

So how do I make a relative path - relative to the css file - to my images?

When I remove the tilde, ‘npm start’ can build … but the image is not showing up in the html.

Please keep in mind that my production and local folder structures are different, thats why it needs to be relative to the css file.

[szabototo89]

This is a serious breaking change, it cannot be closed by just saying that use relative paths. There is a reason why I used ~ in the SCSS stylesheets.

[bnussey]

Hi @filipesilva I think this should be reopened and addressed as its a serious bug.