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

support
2

Assuming you start with npm i bootstrap-icons…

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

config.toml

[[module.mounts]]
source = 'static'
target = 'static'

[[module.mounts]]
source = 'node_modules/bootstrap-icons/font/fonts'
target = 'static/fonts'

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

assets/sass/main.scss

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

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

layouts/_default/baseof.html

{{ $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.