Angular 2 is unable to compile sass due to relative paths to package assets

[OyvindWN]

I have a hard time getting leaflet-measure to work in Angular, the .scss file will not properly compile. It has something to do with the assets not being available in the dist folder when the sass is compiled

Error example on ng serve,

Error: ./node_modules/leaflet-measure/scss/leaflet-measure.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleError: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
(Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\leaflet-measure.scss:110:6: Can't resolve './assets/rulers_@2X.png' in 'C:\Users\myUser\Documents\vx-web-lightning_archive\node_modules\leaflet-measure\scss'


  109 |     .leaflet-retina & {
> 110 |       background-image: url(assets/rulers_@2X.png);
      |      ^
  111 |     }

at Object.emitError (C:\Users\myUser\Documents\vx-web-lightning_archive\node_modules\webpack\lib\NormalModule.js:173:6)
    at C:\Users\myUser\Documents\vx-web-lightning_archive\node_modules\@angular-devkit\build-angular\src\webpack\plugins\postcss-cli-resources.js:125:28
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Promise.all (index 1)

I think this crashes because of the path in the url(). If I go into leaflet-measure's style sheet in node_modules and add a / behind every url path then I get past this compiling error, though I don't get the icon .png's visible on my website.

I have tried adding a glob to assets in angular.json, with "output": "assets/" (or "/assets", "./assets", but this doesn't change anything to the error message

{ "glob": "**/*", "input": "./node_modules/leaflet-measure/assets", "output": "/assets/" }
But this does nothing.

What else could I try?

[sorin-silaghi]

I'm having the same issue, any ideas?

[Rainlv]

copy node_modules\leaflet-measure\scss\leaflet-measure.scss to node_modules\leaflet-measure\dist may solve in a way, but obviously it's not a wise way.