Merge pull request #314 from jwthomson/recipe-ui-cdn-to-npm

Update "cdn-to-npm" recipe for SAFE v5

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
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
+```
+
+#### 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';
+    ```

mkdocs.yml

@@ -76,6 +76,7 @@ nav:
           - Add daisyUI support: "recipes/ui/add-daisyui.md"
           - Add Feliz support: "recipes/ui/add-feliz.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: