title: What is the best way to distribute static assets via NPM package?
body: <p>I am working on an NPM package (an internal design library) which distributes CSS, SASS mixins and static assets to other projects.</p>
  <p>A problem which I am facing is that my host application's Webpack build is failing when I try to include a SASS mixin coming from my NPM package which references a static asset. This is happening because Webpack tries to resolve all urls relative to the output Webpack file (read more <a href="https://webpack.js.org/loaders/sass-loader/#problems-with-url" rel="nofollow noreferrer">here</a>). This works well when I am building the NPM package but is not when I am building the host application.</p>
  <p>I have setup a repo where the problem could be easily reproduced - <a href="https://github.com/dobrinov/playground/tree/main/webpack/npm-distribute-assets" rel="nofollow noreferrer">https://github.com/dobrinov/playground/tree/main/webpack/npm-distribute-assets</a></p>
  <p>The solutions which I have found for this problems are:</p>
  <h3>Inline your assets in the distributed CSS and SASS files</h3>
  <p>This is the approach which Twitter Bootstrap 5 uses for distributing SVGs.</p>
  <h3>URL rewriting</h3>
  <p>This could be achieved by the <a href="https://github.com/bholloway/resolve-url-loader" rel="nofollow noreferrer">resolve-url-loader</a> Webpack loader which will rewrite urls to be relative to the file that contain them and not to the Webpack output file.</p>
  <h3>SASS variables</h3>
  <p>This is something which Twitter Bootstrap did in its old SASS implementation. It is not ideal because in order to achieve it you have to use SASS <code>@import</code> (it puts variables in the global space) instead of <code>@use</code>, which is discouraged.</p>
  <p>Does anyone have a better solution to this problem?</p>