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

[yentheo]

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

1. Create new project

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

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

[alan-agius4]

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]

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]

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]

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]

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]

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

[agalazis]

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