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

support
1

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.

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.

3

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