How to organize static and asset files from the same npm package?

NPM package “bootstrap-icons” has both .woff and .css files. .woff files must go in static/, and .css files must go in assets/ (for fingerprinting). This means I can’t npm install into one place; I have to manually copy the files into the right places, probably with some custom script.

Is there a better way to handle this? How do people normally handle NPM packages like this? I’d really like to be able to npm install and not think about it.

Assuming you start with npm i bootstrap-icons

Step 1 - Mount the bootstrap fonts folder to static/fonts/


source = 'static'
target = 'static'

source = 'node_modules/bootstrap-icons/font/fonts'
target = 'static/fonts'

Step 2 - Import the bootstrap scss file as a Sass module


@use "../../node_modules/bootstrap-icons/font/bootstrap-icons.scss";

Step 3 - Transpile Sass to CSS using the Dart Sass transpiler


{{ $opts := dict "targetPath" "style.css" "transpiler" "dartsass" }}
{{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }}
  <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}

N.B. This will fail if you use the Libsass transpiler. Been there, done that.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.