Can't use relative paths in url() in scss files #12797

yentheo · 2018-10-29T17:10:44Z

Bug Report or Feature Request (mark with an `x`)

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

Command (mark with an `x`)

- [x] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

npm: 6.4.1
node: v10.7.0
ng cli: 6.2.6
macOS High Sierra

Repro steps

Create new project

ng new ng-sass-test--style=scss

Add following files:

  - src
    - sprite
      - _sprite.scss
      - sprite.svg

With the following content:

# _sprite.scss
.sprite-common {
    background-image: url('sprite.svg');
}

Add the following line to src/styles.scss.
@import '~src/sprite/sprite';
Add the same line to src/app/app.component.scss.

The log given by the failure

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/styles.scss)
Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /***/ng-sass-test/src/sprite/_sprite.scss:2:22: Can't resolve 'sprite.svg' in '/***/ng-sass-test/src'

  1 | .sprite-common {
> 2 |     background-image: url('sprite.svg');
    |                      ^
  3 | }

ERROR in ./src/app/app.component.scss
Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /***/ng-sass-test/src/sprite/_sprite.scss:2:22: Can't resolve 'sprite.svg' in '/***/ng-sass-test/src/app'

  1 | .sprite-common {
> 2 |     background-image: url('sprite.svg');
    |                      ^
  3 | }

Desired functionality

I would like to be able to use the relative file path in the scss file. I know this is solved by using an absolute path for the image. But I'm using the package svg-sprite, I'm not an expert in the package, but it looks like it doesn't support generation of an absolute path. Maybe I'm missing something in the angular-cli setup, so I can use this way of path-handling.

Mention any other details that might be useful

The text was updated successfully, but these errors were encountered:

alan-agius4 · 2018-10-29T18:43:10Z

Just had a quick look at this, at this is tricky one.

Since in ./src/app/app.component.scss if you want to use relative url, the image src, should be ../sprite/sprite.svg, while forstyle.scss it should be ./sprite/sprite.svg.

yentheo · 2018-10-30T10:01:56Z

Well yes, if I use a relative path in the one sass-file, it uses it as relative from every other file where I import it. Isn't there a way to just have it relative to the single file with the url()?

alan-agius4 · 2018-10-30T10:39:42Z

I think the recommended approach here is to put these sprite file in the assets folder, and use root level paths (starting with /) for urls in sass files that are imported by other sass files.

In scss files at an absolute path;

background-image: url('/sprite/sprite.svg');

in your angular.json add the following so that the sprite is copied, under architect -> build -> options

"assets": [
    "src/sprite/sprite.svg"
],

From svg-sprite package point of view, there will be no changes.

yentheo · 2018-10-30T10:42:34Z

The problem with that is that I can't change the sprite.scss, it is generated by the svg-sprite package. For as far as I know, it does not have the option to generate with an absolute path.

alan-agius4 · 2018-10-30T11:55:47Z

The simplest way to do it is to copy https://github.com/jkphl/svg-sprite/blob/6966592489dfcf2cd9ed2bba500cb8ee31c00b9c/tmpl/css/sprite.scss and add a lead slashes / and when using svg-sprite you provide this template via configuration example

config            = {
	mode: {
        css: { // Create a «css» sprite
            render: {
                scss : {
                    template: 'my-custom.scss',
                }
            },
        },
    },
},

yentheo · 2018-11-05T09:16:45Z

Tried it out, works perfect. Thanks for the idea @alan-agius4 !

agalazis · 2019-01-11T14:49:17Z

Doesn't work same issue with absolute paths (at least behaviour is inconsistent with angular6 ). Happened after upgrade to 7. I think what changed is automatically adding resolved scss assets to assets option/public folder. Hence people reporting having to add each file to assets (At least in the past we didn't need to).

agalazis · 2019-01-11T15:27:39Z

btw I am not getting any errors for entirely wrong paths either as I used to.
seeing this: #12746 makes me think that updating angular +sass is a nightmare are there any instructions for updating? could this be caused by upstream projects as well?

agalazis · 2019-01-11T17:59:36Z

is sass loader what angular uses internally?
https://github.com/webpack-contrib/sass-loader#problems-with-url

salilgaurav · 2019-01-17T15:32:44Z

any update on this issue ?

jussikinnula · 2019-02-04T06:02:23Z

I’m also interested on this, since Stylus and LESS work fine with relative URLs and SASS doesn’t. For ejected projects resolve-url-loader does the trick.

ruimarques · 2019-02-07T13:38:19Z

I get the following, rocking Angular CLI: 7.3.0, Angular: 7.2.3.

// angular.json
"assets": [
    "src/assets"
]

background-image: url('/src/assets/images/icon.png');

// GET http://localhost:3000/src/assets/images/icon.png 404 (Not Found)

background-image: url('../../../../assets/images/icon.png');

// GET http://localhost:3000/icon.png 200 OK

alan-agius4 · 2019-03-13T07:53:44Z

As @agalazis, correctly pointed out the issue. Sass itself doesn't provide Url rewiring. While indeed resolve-url-loader might work in some cases, this relies on a non standard behaviour as it uses sourcemaps to rewire the paths.

alan-agius4 · 2019-03-13T08:10:59Z

@ruimarques, I suggest you open a separate issue with a reproduction for the issue you are encountering.

agalazis · 2019-03-13T19:10:23Z

@alan-agius4 another point to mention in the past svgs in my css but after giving up and setting assets path now they are loaded as links after build

acohenOT · 2019-06-04T16:06:40Z

Please consider not removing rebaseRootRelativeCssUrls build option (#14587) until this issue is fixed. Since this issue prevents using relative URLs, the rebaseRootRelativeCssUrls option is the only workaround when needing to specify a base-href when building.

iwnow · 2019-06-14T11:55:41Z

background-image: url('~/assets/images/logo.svg');

works for me (version 8.0.1)

michael-letcher · 2019-06-19T23:59:26Z

@iwnow This has been said to cause the app to be deployed with images copies to the dist folder (out of the assets folder) meaning you have multiple copies for no reason.

Angular Team:
Please fix this, it's very sad that it's now "The recommended method to transition is to use relative paths within the source stylesheet".

This ticket has been here for well over a year. What was the plan? Was there one? It seems the idea was to just break AngularCLI and say use this method that doesn't work and hope for the best.

iwnow · 2019-06-26T17:43:51Z

@michael-letcher yes I understand but I have no multiple copies, all works as expected
this is a simple workaround, but I still want this to be fixed

Dada-Tech · 2019-08-05T03:50:13Z

background-image: url('../../assets/img/bg-masthead.jpg'); worked for me.
Very annoying.

safik222 · 2019-10-01T12:20:19Z

The solution is to write the path as if you were starting from "angular.json".

Instead of
background-image: url('../assets/images/pattern-dot-grid.svg');

Write it like this (witout the dots at the beggining)
background-image: url('/assets/images/pattern-dot-grid.svg');

-- this worked for me ☺

intellix · 2019-10-18T13:34:22Z

A couple of the workarounds here are basically: "just use absolute paths". The issue is about the inability to use relative paths :D

In some cases you can't use absolute because you have a baseHrefUrl like /en/ so / is going out of that folder to a path that doesn't exist.

You can workaround this using Express I guess but

pnrdk · 2019-10-23T07:14:48Z

I am having a similar issue. My production server is running the solution in a subfolder (mydomain.com/myapp/). I have setup the base href to "/myapp/" on localhost it is set to "/".

I have a css file placed in "assets/css" this file is referring to a file in "assets/images", I have done that writing "/assets/images/myimage.png" This is working fine localhost, but when publishing to the server it can't find the image. If I change url on the server in the css to "assets/images/myimage.png", it works on the server.

Then I have tried changing the url in the project to the one on the server ("assets/images/myimage.png"), but then it can't compile I am getting the error: Can't resolve 'assets/images/myimage.png".

I have tried the following combinations, but without any luck :-|

'./assets/images/myimage.png'
'~assets/images/myimage.png'
'../assets/images/myimage.png'

drewberk · 2019-10-23T15:47:59Z

@pnrdk did you try the following (note the / between the ~ and 'assets')?
~/assets/images/myimage.png

xouqoa · 2019-10-28T20:35:22Z

@pnrdk did you try the following (note the / between the ~ and 'assets')?
~/assets/images/myimage.png

This worked for me with the latest version of the CLI.

nisapaypay · 2019-11-18T04:45:09Z

background-image: url('~/assets/images/logo.svg');
works for me (version 8.0.1)

thankk you

incodedev · 2019-12-12T19:23:56Z

You can use inline CSS style
<div style="background-image: url('/assets/images/logo.svg');" ></div>

KingDarBoja · 2020-01-08T17:42:04Z

@iwnow MVP, that really works! Works in latest Angular version (8.3.21)! 🚀

cyrilfr · 2020-01-14T20:36:05Z

background-image: url('~/assets/images/logo.svg');
works for me (version 8.0.1)

It's compiled to

background-image: url('/./assets/images/logo.svg');

in my case which is not what's expected.

Globally I'd recommand to never use absolute paths in url() as it is pure CSS and is always relative to the index.html file in production.

However, the compiler complains when using relative paths, especially if you import a variables.scss file containing assets in your components.

bnohad · 2020-01-21T09:49:12Z

background-image: url('~/assets/images/logo.svg');
works for me (version 8.0.1)

the problem this works in dev env, but not when building the app. (in SCSS - didn't try plain CSS)

the build output for '~/assets/images/logo.svg' is -> '/assets/images/logo.svg' which prevents from deploying the app in any other path than the root, even though in my index.html i set the baseHref to be relative './'

cyrilfr · 2020-01-21T10:13:47Z

There is still this fix if you can use custom-webpack.
It passes the webpack compilation and provides good relative paths in prod.

bnohad · 2020-01-21T10:15:59Z

the only way i found how to fix it in builds is to specify the base-href attribute to be the same as the path i plan to deploy to, for example:

ng build --base-href ui
deploy the app under www.example.com/ui/

and then in the SCSS file use: background-image: url('~/assets/icon.svg').

after building the app, the ~ char is replaced with whatever value you provide to the --base-href attribute.

Yizhachok · 2020-02-29T16:45:36Z

@bnohad unfortunately this didn't work with --localize flag that has been introduced in angular 9 to compile several language locales using one command.
I use ng build --prod --localize command and has configured 2 languages but there no added language directory to url path when I write like this background-image: url('~/assets/icon.svg')
But I see language directory in Html base tag. Probably this is bug of angular 9

The CLI also adjusts the HTML base HREF for each version of the application by adding the locale to the configured baseHref. https://angular.io/guide/i18n

devniel · 2020-03-13T03:45:26Z

Just found that when using a caret ^ as the first character on the url provided in url(), the angular building process ignores it (it's actually a postcss-loader plugin), so with that you can use anything including relative urls expecting different base-hrefs. example:

.box {
  background: url("^myfiles/images")
}

Of course, there is an assets folder in angular where you will put the images (to have it working locally you can just url("^assets/images")) but the point is that when you want to deploy it in production, maybe you will copy your assets folder content to your server.com/myapp/myfiles folder, so in this case it's very useful, otherwise, the builder will try to resolve the path and it will throw an error because it can't found the files (actually, it has a problem when the url is relative),

In addition, as off-topic, when resolving the urls (not using ^), the files will be copied to the dist/project folder, not to dist/project/assets (that's the destiny of the assets folder configured in angular.json), so it will be quite a mess. A solution is to override the webpack scss loaders or (a clean way) is to use the next approach by including the target files in the assets directories, even of third party modules.

"assets": [
     "src/favicon.ico",
     "src/assets",
    { "glob": "**/*", "input": "./node_modules/mymodule/assets/", "output": "./assets/" }
 ],

For reference:
https://github.com/angular/angular-cli/blame/523a20d92bc516dbdf2ea17bc9b02d9402232c47/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/postcss-cli-resources.ts#L72

dannyskoog · 2020-03-13T05:41:57Z

Just found that when using a caret ^ as the first character on the url provided in url(), the angular building process ignores it (it's actually a postcss-loader plugin), so with that you can use anything including relative urls expecting different base-hrefs. example:
.box {
  background: url("^myfiles/images")
}

FYI - the caret sign was previously discussed in the following issue angular/angular#32811

devniel · 2020-03-13T09:29:42Z

Thanks @dannyskoog , not supported feature means that maybe this hidden gem could be removed without warning?

dannyskoog · 2020-03-13T09:31:32Z

Yes @devniel. And that was why I wasn't allowed to add it to the documentation (reference: angular/angular#32921 (comment))

…s when using preprocessors Previously, when using a preprocessor, resources (e.g., `url(./my-image.jpg)`) referenced in a stylesheet that was imported into another stylesheet would retain the exact URL. This would be problematic as the resource would not be at the relative location within the new combined stylesheet. With this change the resource URLs will now be adjusted to reference the origin location of the resource. This allows the resources to be found without any additional changes to the application or build process. CSS and Less already functioned in this manner. This change brings Sass and Stylus to parity. Fixes: angular#12797

…s when using preprocessors Previously, when using a preprocessor, resources (e.g., `url(./my-image.jpg)`) referenced in a stylesheet that was imported into another stylesheet would retain the exact URL. This would be problematic as the resource would not be at the relative location within the new combined stylesheet. With this change the resource URLs will now be adjusted to reference the origin location of the resource. This allows the resources to be found without any additional changes to the application or build process. CSS and Less already functioned in this manner. This change brings Sass and Stylus to parity. Fixes: #12797

tanvirstreame · 2020-05-07T12:19:03Z

Thanks It worked 👍

angular-automatic-lock-bot · 2020-06-07T08:05:03Z

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

yentheo changed the title ~~Can't use relative paths in scss files~~ Can't use relative paths in url() in scss files Oct 29, 2018

alan-agius4 added freq1: low Only reported by a handful of users who observe it rarely severity3: broken area: @angular-devkit/build-angular labels Oct 30, 2018

ngbot bot added this to the needsTriage milestone Oct 30, 2018

filipesilva added the type: bug/fix label Nov 1, 2018

ngbot bot modified the milestones: needsTriage, Backlog Nov 1, 2018

alan-agius4 mentioned this issue Mar 13, 2019

Fails to load non scss files referenced by scss files in @import statements #10604

Closed

acohenOT mentioned this issue Jun 4, 2019

ng build base-href issue (angular cli 8) #14587

Closed

just-jeb mentioned this issue Jan 15, 2020

custom-webpack: Cannot resolve relative paths in url() compile-time just-jeb/angular-builders#660

Closed

alan-agius4 mentioned this issue Jan 15, 2020

postcss-loader: Cannot resolve relative paths in url() compile-time #16667

Closed

cyrilfr mentioned this issue Jan 15, 2020

CSS paths cannot be resolved in prod maximegris/angular-electron#432

Closed

ranolfi mentioned this issue Feb 2, 2020

Background SVG asset not loading when deployed to subdirectories due to leading slash in URI codidact/landing-page#33

Closed

WinterPu mentioned this issue Feb 4, 2020

Each Portfolio Background Image Cannot Display Correctly WinterPu/blog-by-angular#1

Open

clydin mentioned this issue Apr 27, 2020

rebase relative stylesheet assets when using preprocessors #17537

Merged

mgechev closed this as completed in #17537 Apr 27, 2020

kunajs mentioned this issue May 18, 2020

Assets, base href and relative urls in css/scss #17747

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jun 7, 2020

Can't use relative paths in url() in scss files #12797

Can't use relative paths in url() in scss files #12797

Comments

yentheo commented Oct 29, 2018

Bug Report or Feature Request (mark with an x)

Command (mark with an x)

Versions

Repro steps

The log given by the failure

Desired functionality

Mention any other details that might be useful

alan-agius4 commented Oct 29, 2018 • edited Loading

yentheo commented Oct 30, 2018

alan-agius4 commented Oct 30, 2018 • edited Loading

yentheo commented Oct 30, 2018

alan-agius4 commented Oct 30, 2018

yentheo commented Nov 5, 2018

agalazis commented Jan 11, 2019 • edited Loading

agalazis commented Jan 11, 2019 • edited Loading

agalazis commented Jan 11, 2019

salilgaurav commented Jan 17, 2019

jussikinnula commented Feb 4, 2019

ruimarques commented Feb 7, 2019

alan-agius4 commented Mar 13, 2019

alan-agius4 commented Mar 13, 2019

agalazis commented Mar 13, 2019

acohenOT commented Jun 4, 2019

iwnow commented Jun 14, 2019

michael-letcher commented Jun 19, 2019 • edited Loading

iwnow commented Jun 26, 2019

Dada-Tech commented Aug 5, 2019

safik222 commented Oct 1, 2019 • edited Loading

intellix commented Oct 18, 2019

pnrdk commented Oct 23, 2019

drewberk commented Oct 23, 2019

xouqoa commented Oct 28, 2019

nisapaypay commented Nov 18, 2019

incodedev commented Dec 12, 2019

KingDarBoja commented Jan 8, 2020

cyrilfr commented Jan 14, 2020 • edited Loading

bnohad commented Jan 21, 2020

cyrilfr commented Jan 21, 2020 • edited Loading

bnohad commented Jan 21, 2020 • edited Loading

Yizhachok commented Feb 29, 2020

devniel commented Mar 13, 2020

dannyskoog commented Mar 13, 2020 • edited Loading

devniel commented Mar 13, 2020

dannyskoog commented Mar 13, 2020

tanvirstreame commented May 7, 2020

angular-automatic-lock-bot bot commented Jun 7, 2020

Bug Report or Feature Request (mark with an `x`)

Command (mark with an `x`)

alan-agius4 commented Oct 29, 2018 •

edited

Loading

alan-agius4 commented Oct 30, 2018 •

edited

Loading

agalazis commented Jan 11, 2019 •

edited

Loading

agalazis commented Jan 11, 2019 •

edited

Loading

michael-letcher commented Jun 19, 2019 •

edited

Loading

safik222 commented Oct 1, 2019 •

edited

Loading

cyrilfr commented Jan 14, 2020 •

edited

Loading

cyrilfr commented Jan 21, 2020 •

edited

Loading

bnohad commented Jan 21, 2020 •

edited

Loading

dannyskoog commented Mar 13, 2020 •

edited

Loading