Relative url('..') in scss files cannot be resolved

[httpdigest]

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

[httpdigest]

I would like to make it very clear, that when explicitly using CSS (instead of SCSS) by doing the following:

• in .angular-cli.json: leave the "styles.css" as proposed by ng new and also leave the defaults/styleExt to "css"
• leave the styles.css as styles.css (and not styles.scss as mentioned above)
• add the mystyle as mystyle.css (and not mystyle.scss as mentioned above)
• include the mystyle.css as @import './theme/styles/mystyle.css'; in src/styles.css

then everything works.

[xuchao1]

you may have an error in your scss file.
Error: Can't resolve '../images/background.png' in '..../ng4-test/src'
check your file path again？

I had the same ERROR in ./~/css-loader?. And it ends to be my scss error.

[httpdigest]

No, that was just to mask off the actual file system path. Please take the paths as layed out in the "Repro steps." section. They are very exact and very explicitly these paths written there.
I modified the log output to make that clear.

[edemirkan]

@httpdigest Could you please push the relevant parts of your code to a repo and share?

[httpdigest]

@demirk4n please see the exhaustive and complete "Repro steps." steps in the initial post. It contains every necessary step to reproduce the case and takes only half a minute to setup.

[httpdigest]

Looks like the section Problems with url(...) in the sass-loader README.md describes this exact problem and a possible solution, using the resolve-url-loader.

[httpdigest]

Okay, using the 'resolve-url-loader' completely resolves my issue. The relevant part in @angular/cli where this needed to be added for me in order to work, was in the models/webpack-config/styles.js file like so:

    const commonLoaders = [
        // css-loader doesn't support webpack.LoaderOptionsPlugin properly,
        // so we need to add options in its query
        `css-loader?${JSON.stringify({ sourceMap: cssSourceMap, importLoaders: 1 })}`,
        'resolve-url-loader', // <- this is new!
        'postcss-loader'
    ];

Then after a npm install --save-dev resolve-url-loader, the ng build of both the example described in the reproduction steps in this issue above as well as my more complex application (which uses a customized PrimeNG Ultima theme) worked.

Currently, we now rely on patching webpack's models/webpack-configs/styles.js in a npm postinstall step. It'd be nice if this can be added into Webpack itself.

[zuo305]

I am using css, and i have the same issue.

ERROR in ./src/app/hotel-search/firstpage-search/firstpage-search.component.css
Module not found: Error: Can't resolve './../asserts/images/peopleMinwhite.svg' in '/Users/john/b2b-site/src/app/hotel-search/firstpage-search'

[httpdigest]

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?

[zakdances]

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

[luketn]

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.

[filipesilva]

@httpdigest would you be interested in making a PR that adds your proposed change (#5752 (comment))?

[filipesilva]

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 #5213, my response can be found at #5213 (comment).

[evaldobratti]

@filipesilva I'm facing the same problem as @luketn, this is preventing me to migrate an app to angular-cli

[angular-automatic-lock-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.}