Angular / SCSS image url relative

Question

Situation:

• 3rd party CSS files have to be used in this project.
• the CSS files use relative paths in image urls (e.g. url('../images/logo.png')
• these files are constantly being udpated by the provider (so it's not an option to rewrite the paths every time an update happens)
• these are to be used in an Angular6/SCSS project

Structure example:

- src
   | - styles.scss
   | - app
   | - assets
          |- third-party
          |          |- styles      
          |          |      |- general.scss
          |          |- images
          |          |      |- logo.png
          |          |- import.scss
          |- styles/
          |- images/

The angular.json refers to two stylessheets:

        "styles": [
          "src/assets/third-party/imported.scss",
          "src/styles.scss"
        ],

More info

• there are many files in the third-party/styles folder, so the "import.scss" has been written to restrict the amount of stylesheets delcared in Angular.json
• the third party scss files can also be in their own subfolders (yay), so it's not an option to store the import.scss inside the thrid-party/styles folder

Problem

• general.scss (and all other siblings) are referring to images (and fonts) via relatives paths, eg url('../images/logo.png');
  • unless the paths are modified (e.g. made relative to import.scss) OR all third-party/styles files are added to the cli (angular.json), the relative paths issues kick-in. See error below.

error message:

 Can't resolve '../images/logo.png' in '<project root>\src\assets\third-party\'

What is the recommended approach to this? Import all third party stylesheet in the angular cli / angular.json OR import/include these in an intermediate "barrel" file like the import.scss

NB. I know this topic has given rise to a multitude of topics, but I haven't found an answer that's either a clear "no" or a clean fix.

Drye

Why don't you try "stylePreprocessorOptions": { "includePaths": [ "src/style-paths" ] }, from github.com/angular/angular-cli/wiki/stories-global-styles ? – Lagerkvist

try this bro, url('./../images/logo.png'); – Judaea

@IshmeetSingh thanks for that. However doing so doesn't solve the relative path issue. It simplifies the import statement but the original issue isn't solved :( – Drye

Thanks @FatehMohamed for your proposal. I can't makeit so as I msut consider the third party files read-only (updated X times a week by the provider). – Drye

Thanks @Vega, but same issue as I cannot update the third party stylesheets. – Drye

change your base in index to <base href="./"> then – Judaea