Relative url paths in scss files

Question

I have some relative url path in my scss file, for example:

&.id-1 {
    background-image: url("./assets/images/live-sports/icon-soccer.svg");
}

and for the other element I have this url path

&.id-1 {
    -webkit-mask-image: url("./assets/images/live-sports/terminal/icon-soccer.svg");
}

In my angular.json build options for that project looks like:

"options": {
        "outputPath": "dist/AppLiveConference",
        "resourcesOutputPath": "resources",
        "index": "projects/AppLiveConference/src/index.html",
        "main": "projects/AppLiveConference/src/main.ts",
        "polyfills": "projects/AppLiveConference/src/polyfills.ts",
        "tsConfig": "projects/AppLiveConference/tsconfig.app.json",
        "aot": false,
        "assets": [
          "projects/AppLiveConference/src/favicon.ico",
          "projects/AppLiveConference/src/assets"
        ],
        "styles": [
          "projects/AppLiveConference/src/styles.scss"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js"
        ]
      }

Problem is that angular-cli ignores subfolders and puts all resource files in resources folder and "icon-soccer.svg" is overwritten each other. How can I fix this?

angular-cli version: 8.1.3

Tony Ngo Tony Ngo · Accepted Answer · 2019-09-13T15:52:18

Your url is wrong you should remove it

"options": {
        "outputPath": "dist/AppLiveConference",
        "resourcesOutputPath": "resources",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": false,
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.scss"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js"
        ]
      }

Relative url paths in scss files

1 Answers