From 47561431deeaba68bbe5b9f5e4a8708cda96f70b Mon Sep 17 00:00:00 2001 From: Jaz Thomson Date: Fri, 15 Dec 2023 15:00:08 +0000 Subject: [PATCH] Update "cdn-to-npm" recipe for SAFE v5 --- docs/recipes/ui/cdn-to-npm.md | 22 ++++++++++++++++++++++ mkdocs.yml | 1 + 2 files changed, 23 insertions(+) create mode 100644 docs/recipes/ui/cdn-to-npm.md diff --git a/docs/recipes/ui/cdn-to-npm.md b/docs/recipes/ui/cdn-to-npm.md new file mode 100644 index 00000000..7bb2aea2 --- /dev/null +++ b/docs/recipes/ui/cdn-to-npm.md @@ -0,0 +1,22 @@ +# How do I migrate from a CDN stylesheet to an NPM package? +Often, referencing a stylesheet from a CDN is all that's needed to add new styles but you can use an NPM package instead. +--- + +#### 1. Remove the CDN Reference +Remove the CDN reference from the index template in `src/Client/index.html`: +```html + +``` + +#### 2. Add the NPM Package +Add styles from NPM. [How do I add an NPM package to the client?](../../package-management/add-npm-package-to-client) +In this example we will add the [Bulma NPM package](https://www.npmjs.com/package/bulma). + +#### 3. Add a reference to your stylesheet +1. Add a stylesheet to your project using [this recipe](../add-style). Add a scss file instead of a css file. +1. Add the following lines to your scss file: + ```scss + // Set variables to affect Bulma styles + $body-color: #c6538c; + @import 'bulma/bulma.sass'; + ``` diff --git a/mkdocs.yml b/mkdocs.yml index 11e4bbb4..00288d0a 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -75,6 +75,7 @@ nav: - UI: - Add daisyUI support: "recipes/ui/add-daisyui.md" - Add FontAwesome support: "recipes/ui/add-fontawesome.md" + - Migrate from a CDN stylesheet to an NPM package: "recipes/ui/cdn-to-npm.md" - Storage: - Quickly add a database: "recipes/storage/use-litedb.md" - JavaScript: