How do I migrate from a CDN stylesheet to an NPM package?
Though the SAFE template default for referencing a stylesheet is to use a CDN, it’s quite reasonable to want to use an NPM package instead. One common case is that it enables you to further customise Bulma themes by overriding Sass variables.
1. Remove the CDN Reference
Find the following line in
src/Client/index.html and delete it before moving on:
<link rel="stylesheet" href="https://firstname.lastname@example.org/css/bulma.min.css">
2. Add the NPM Package
Go ahead and add the Bulma NPM package to your project.
3. Load the Stylesheets
There are two ways for loading the stylesheets:
A quick and easy way to reference this NPM package in an F# file is to insert the following couple of lines:
open Fable.Core.JsInterop importAll "bulma/bulma.sass"
You can use this approach for any NPM package.
b. Using Sass
- Add a Sass stylesheet to your project using this recipe.
- Add the following line to your Sass file to bring in Bulma