Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
OyvindWN opened this issue Aug 6, 2021 · 2 comments

Comments

@OyvindWN
Copy link

OyvindWN commented Aug 6, 2021

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/[email protected]' in 'C:\Users\myUser\Documents\vx-web-lightning_archive\node_modules\leaflet-measure\scss'


  109 |     .leaflet-retina & {
> 110 |       background-image: url(assets/[email protected]);
      |      ^
  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
Copy link

I'm having the same issue, any ideas?

@Rainlv
Copy link

Rainlv commented Jan 16, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants