search

thegreenhouseio / angular-webapp-seed

Angular (2+) and Webpack Seed Project for webapp projects in The Greenhouse
https://www.thegreenhouse.io/
4 stars 2 forks source link

build error when importing a SASS file with a background image into another SASS file #35

Closed thescientist13 closed 6 years ago

thescientist13 commented 8 years ago

When a SASS file has a background: url("path/to/image.png") and that SASS file is @imported into another SASS file, webpack raises a build error, citing it can't find the image path.

similar issue reported in https://github.com/jtangelder/sass-loader/issues/274

thescientist13 commented 8 years ago

one workaround I've done is to use an absolute URL (uploaded to Cloudfront in my case)

thescientist13 commented 7 years ago

Per feedback in the linked issue

seems using relative url, see docs about https://github.com/webpack-contrib/sass-loader#problems-with-url.

thescientist13 commented 6 years ago

Seems like not having this issue in this repo, that was reported in another project, where this was needed https://bitbucket.org/thegreenhouse/as-webapp-2.0/src/337e74c4dbbfd2548b0e35e4fea47ca63062f7ef/src/views/home/home.html?at=develop&fileviewer=file-view-default

<div class="as-media-carousel">
  <!-- TODO if loading from cloudfront works (TGH-171), remove this??? -->
  <img src="http://d34k5cjnk2rcze.cloudfront.net/images/website/home-banner.jpg" class="img-fluid">

  <span class="as-media-carousel__label">
    Welcome to Analog Studios!
  </span>

  <span class="as-media-carousel__attribution-label">Photo courtesy of
    <a href="http://www.maciaphotography.com/" class="as-media-carousel__attribution-label-link" target="_blank" alt="Morgan Macia Photography">Morgan Macia</a>
  </span>

</div>