angular-cli: Relative url('..') in scss files cannot be resolved

- [X] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Output from: ng --version:

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.0
node: 7.8.0
os: win32 x64
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

Repro steps.

ng new url-test
cd url-test
in .angular-cli.json change the “styles.css” to “styles.scss” and change the defaults/styleExt from “css” to “scss”
rename src/styles.css to src/styles.scss
add the two new folders: src/theme/images and src/theme/styles
add a new file src/theme/styles/mystyle.scss with the content: body { background: url('../images/background.png'); }
add a new file src/theme/images/background.png being any PNG image
add the following to src/styles.scss: @import './theme/styles/mystyle.scss';
run ng build
observe that the output is:

The log given by the failure.

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/sass-loader!./src/styles.scss
Module not found: Error: Can't resolve '../images/background.png' in 'some/absolute/path/to/ng4-test/src'
 @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/sass-loader!./src/styles.scss 6:56-91
 @ ./src/styles.scss
 @ multi ./src/styles.scss

Desired functionality.

What would [you] like to see implemented?

Currently, the behaviour when specifically using SCSS is different from using CSS. When using CSS (styles.css and mystyle.css) then everything works and the background.png image is found. This should be the same when using SCSS.

What is the usecase? Using SCSS instead of CSS for more expressiveness in an obviously more complex application than the one provided here.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 8
Comments: 15 (2 by maintainers)

Most upvoted comments

Having this same issue with scss. As a work-around, I use a root reference like this: "./~/assets/images/hat.svg".

+22

zakdances on Apr 5, 2017

We’re also having the same issue attempting to import the Materialize CSS SASS library. We’re unable to use the work-around mentioned by @zakdances because the library isn’t under our control.

@import './materialize-src/sass/materialize';

Outcome: ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/sass-loader!./src/styles.scss Module not found: Error: Can't resolve '../fonts/roboto/Roboto-Bold.woff'

+1 for adding a feature to angular cli to include the resolve-url-loader for SASS relative path resolution.

luketn on Apr 26, 2017

As it turned out, the issue I was having was related to (and only related to) SCSS, which can be fixed by using the resolve-url-loader. Did you really mention the correct paths in your post? Are you 100% sure that it is exactly asserts/images and not assets/images?

httpdigest on Apr 3, 2017

Actually, now I remember why I didn’t add resolve-url-loader… it has a very important caveat, sourcemaps MUST be enabled for it to work: https://github.com/bholloway/resolve-url-loader#important

This issue is actually a duplicate of https://github.com/angular/angular-cli/issues/5213, my response can be found at https://github.com/angular/angular-cli/issues/5213#issuecomment-284783844.

filipesilva on May 3, 2017